一、padding
1、语法结构
(1)padding-left:10px; 左内边距
(2)padding-right:10px; 右内边距
(3)padding-top:10px; 上内边距
(4)padding-bottom:10px; 下内边距
(5)padding:10px; 四边统一内边距
(6)padding:10px 20px; 上下、左右内边距
(7)padding:10px 20px 30px; 上、左右、下内边距
(8)padding:10px 20px 30px 40px; 上、右、下、左内边距
2、可能取的值
值 描述
(1)length 规定具体单位记的内边距长度
(2)% 基于父元素的宽度的内边距的长度
(3)auto 浏览器计算内边距
(4)inherit 规定应该从父元素继承内边距
3、浏览器兼容问题
(1)所有浏览器都支持padding属性
(2)任何版本IE都不支持属性值“inherit”
二、margin
1、语法结构
(1)margin-left:10px; 左外边距
(2)margin-right:10px; 右外边距
(3)margin-top:10px; 上外边距
(4)margin-bottom:10px; 下外边距
(5)margin:10px; 四边统一外边距
(6)margin:10px 20px; 上下、左右外边距
(7)margin:10px 20px 30px; 上、左右、下外边距
(8)margin:10px 20px 30px 40px; 上、右、下、左外边距
2、可能取的值
值 描述
(1)length 规定具体单位记的外边距长度
(2)% 基于父元素的宽度的外边距的长度
(3)auto 浏览器计算外边距
(4)inherit 规定应该从父元素继承外边距
3、浏览器兼容问题
(1)所有浏览器都支持margin属性
(2)任何版本IE都不支持属性值“inherit”
三、两者的异同点,如图所示:
分享到:
相关推荐
本文将从语法结构、可能取的值、浏览器兼容性等方面详细介绍padding和margin的异同点,并结合图示提供直观的理解。 一、padding(内边距) 1、语法结构 padding属性用于定义元素内容与其边框之间的空间。其基本...
- 行内元素可以设置 padding 和 margin,但 margin 的 top 和 bottom 仅影响其周围的元素。 **23. 什么是外边距重叠?重叠的结果是什么?** - 外边距重叠是指当两个垂直外边距相遇时,它们合并为一个外边距的现象...
了解它们的共同点和不同点对于网页设计和开发至关重要。 共同点: 1. **整体处理**:无论是 `div` 还是 `span`,它们都是用来对内容进行分组的标签。这使得我们可以对这些分组的内容作为一个整体来应用样式,如CSS...
2. dp、sp 和 px 的异同点: - dp (density-independent pixels):密度无关像素,是一种抽象单位,用于跨不同设备分辨率的尺寸计算。 - sp (scale-independent pixels):可缩放像素,主要用于字体大小,会根据用户...
3. margin 和 padding 的区别 margin 是外边距,属于元素之外,相邻元素的 margin 可以融合。padding 是内边距,在元素之内,相邻元素的 padding 不可融合。 4. 检测变量类型 可以使用 typeof 运算符来检测变量的...
- 行内元素可以设置左右 `margin` 和 `padding`,但上下 `margin` 和 `padding` 仅影响元素内部空间,不影响其他元素。 **25、什么是外边距重叠?重叠的结果是什么?** 外边距重叠发生在相邻的两个元素之间,当两...
- **答案**: 盒子模型由内容、填充(padding)、边框(border)和外边距(margin)四部分组成。 **33. 样式初始化的重要性** - **问题**: 为什么要初始化样式? - **答案**: 初始化样式是为了消除浏览器默认样式的差异,...
2. CSS的盒子模型:CSS的盒子模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin),描述了元素占用的空间。 3. CSS的样式表分类:CSS分为内部样式表(在HTML文档内部定义)、外部样式表(链接到...
- **行内元素的padding和margin**:只能设置左右边距和填充,上下无效。 **23. 外边距重叠** - 当两个相邻的块级元素的外边距发生重叠时,实际应用的外边距为两者中的最大值。 - 解决方案:通过设置 `clear:both;` ...
- **过渡和动画之间的异同** - 过渡是自动的,当元素的状态发生改变时触发。 - 动画则需要明确地定义关键帧,通过`@keyframes`规则定义。 - **创建步骤** - 定义关键帧动画规则:`@keyframes myAnimation { from ...