对margin的深入理解

一、margin值得相关总结：

margin属性值可以为正负，可以使用%（%是相对于父元素的width计算）

margin：top right bottom left

（借张图）

margin-top和margin-left的参考线是，包含该盒子元素的top线和left线；

margin实际上是更改盒子的逻辑线（正负值相当于将盒子的逻辑线向外或者向内移动）。

margin不会改变盒子的物理线（不会影响盒子内容的正确显示）。

例如：当margin-left为负值时，将盒子的逻辑线向内移动，然后再与参考线对齐。

二、margin合并（边界塌陷）：

1、margin左右不合并；

2、margin上下只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

4、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

   5、假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

参考地址：

http://www.jb51.net/css/66198.html

http://www.w3school.com.cn/css/css_margin.asp