margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。是允许负值的。
margin(padding):10px;
所有 4 个外边距都是 10px
margin(padding):10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
margin(padding):10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
margin(padding):10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px.
padding 简写属性在一个声明中设置所有内边距属性。这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
是不允许负值的。
边距属性定义元素周围的空间。通过使用单独的属性,可以对上、下、左、右的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。边界,元素周围生成额外的空白区。“空白区”
通常是指其它元素不能出现且父元素背景课件的区域。
一问题:什么时候用margin?什么时候用padding?
解决方法:margin是透明的,是用来个开元素语元素的间距;padding是用来填充元素与内容的间隔。margin在布局中用于分开元素是元素与元素的距离;padding用于元素与内容之间的填充
,在不固定高度布局中,padding用来撑起元素高度。
二问题:margin和padding有什么区别?
解决:比如一个盒子里有一个瓶子,瓶子与盒子之间的距离就称为padding,盒子与另一个盒子之间的距离就称为margin。
三问题:margin的重叠
解决:1、水平边距永远不会重合。
2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下:
a、全部都为正值,取最大者;
b、不全是正值,则都取绝对值,然后用正值减去最大值;
c、没有正值,则都取绝对值,然后用0减去最大值。
注意:相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
3、相邻的盒模型中,如果其中的一个是浮动的(float),垂直margin不会重叠,并且浮动的盒模型和它的子元素之间也是这样。
4、设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)。
5、设置了绝对定位(position:absolute)的盒模型,垂直margin不会被重叠,并且和他们的子元素之间也是一样。
6、设置了display:inline-block的元素,垂直margin不会重叠,甚至和他们的子元素之间也是一样。
7、如果一个盒模型的上下margin相邻,这时它的margin可能重叠覆盖(collapse through)它。在这种情况下,元素的位置(position)取决于它的相邻元素的margin是否重叠。.