CSS Margin外边距合并

应该知道这点东西的！！！

可是偏偏记不住！

 

外边距合并会发生在以下两种情况下：

1 垂直出现的两个拥有外边距的块级元素。

div1 {
    margin-bottom: 20px;
}

div2 {
    margin-top: 10px;
}

恰巧他俩div1在上面，div2在下面。这个时候表现出来就是div1的下外边距为20px，但是div2的上外边距2为20px。而div2外边距紧挨着的是div1的border-bottom。

 

2 一个父元素包含一个子元素，且都有外边距。

div1 {
    margin-top: 20px;
}

div2 {
    margin-top: 10px;
}

div2在div1的内部。这个时候div1的上外边距为20px，但是div2的上外边距也变成了20px。

 

以上真的是很有意思，不知道CSS2的规范设计的时候多么随意，浏览器厂商的实现是多么的难。不过这真的很有价值。

 

这里有例外，浮动的，绝对定位的不会进行合并!!!

如果在一个父元素中，第一个子元素运用了float（浮动），要想第二个子元素和第一个子元素的margin-top具有同样的效果只能追加一个position: absolute或者position： fixed（绝对定位），但是绝不可以追加top|bottom|left|right中的任何一个，除非必须。

 

转载于:https://www.cnblogs.com/voctrals/p/4137487.html