margin collapse

发表于 | 分类于

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!

元素的上下margin值会重叠为一个，等于其中较大的那个值。
注意：只有上下的会重叠，左右的不会。
比如两个相邻的元素：

1
2
<div></div>
<p></p>

1
2
div{margin-bottom: 20px;}
p{margin-top: 10px;}

实际的margin值为2个元素margin值较大的值，20px，而不是20px + 10 px。

如何避免margin重叠？
这个在之前的bfc讲过，将2个元素放在不同的bfc中即可避免。栗子：https://jsfiddle.net/JuneDeng/xhp0oyfj/9/