语法：
margin : auto | length
参数：
auto : 值被设置为相对边的值
length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说，左右外延边距可以是负数值。请参阅长度单位
说明：
检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
margin属性不可用于td和tr对象。
外延边距始终透明。
示例：
body { margin: 36pt 24pt 36pt; }
body { margin: 11.5%; }
body { margin: 10% 10% 10% 10%; }
外边距(margin)垂直叠加现象
外边距叠加是指两个垂直相邻的普通块级元素（不包含浮动元素、绝对定位元素、内联元素、inline-block内联块元素），当上下两个边距相遇时，起外边距会产生叠加现象，且叠加后的外边距，等于其中较大者。注意水平方向外边距是不会发生重叠的（一个例外是：HTMLayout中指定 flow: h-flow; 改变块节点为水平流动时则会在水平方向重叠）
垂直相邻的块级元素上下边距叠加图示如下：
另一个叠加现象是当一个元素包含在另一个元素之中时，并且父元素没有指定边框（或透明边框）、内边距，那么子元素与父元素之间也会产生叠加现象，叠加后的外边距，等于其中最大者，图示如下：
同理，如果一个无内容的空元素，其自身的上下边距也会产生叠加。
外边距垂直叠加的的计算规则
a、相邻外边距全部都为正值，取最大值；
b、相邻外边距不全是正值，则都取绝对值，然后用正值减去最大值； c、相邻外边距没有正值，则都取绝对值，然后用0减去最大值。
外边距叠加的意义
外边距的叠加只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距叠加的存在，段落之间就不会产生双倍的距离。
外边距叠加可能遇到的一些例外
下面列出来的例外在不同浏览器下可能表现不一致，最好是尽量避免。
- 绝对定位（position:absolute）垂直margin不会被重叠
- 设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。
- 给元素添加上浮动(float)属性，垂直margin不会重叠
- 设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。
- 因为叠加的前提是需要垂直相邻，在可能叠加的元素间添加空的块元素也可以阻止外边距叠加。
- 父子块元素外边距相邻时，在可能叠加的外边距之间添加透明边框或者内边距阻止外边距叠加。
- 一个应用了清除操作的元素的margin-top不会和它的块级父元素的margin-bottom重叠
- 根元素的垂直margin不会被重叠
| 
发表于 2012-6-28 09:48:48
发表于 2014-6-11 06:32:38