css margin塌陷问题

一、同级块级元素塌陷

html

　　<h2>
        同级块级元素塌陷
    </h2>
    <div class="block1">
        block1
    </div> 
    <div class="block2">
        block2
    </div>
    <div class="block3">
        <div class="ib1 ib">
            同级元素1        
        </div>    
        <div class="ib2 ib">
            同级元素2
        </div>
        <div class="ib2 ib">
            同级元素3
        </div>
    </div>

css

body{
    margin:50px;
  background-color:#ccc;
}

.block1 {height: 50px;padding: 10px;margin: 10px;background: #fff;}
.block2 {height: 50px;padding: 10px;margin: 20px;background: #999;}
.ib {display:inline-block;width: 45%;margin: 10px;border: 1px solid #ff0;}

结果

图1

图2

图3

 

 

 

先看block1跟block2，按道理说，block1 有margin-bottom: 10px; block2有margin-top: 20px;那么block1跟block2之间的间距应该是有30px才对，事实上却只有20px，值比较大的margin起了作用；

再看块级内联元素，ib1、ib2、ib3，每个ib之间的margin是10px；结果是每个ib之间的左右和上下margin都有20px;

最后再看浮动的块级元素：图3，margin也是没有塌陷的。

结论说明margin塌陷只发生在真正意义的块级元素上（浮动跟那些inline-block不算），浏览器应该是希望我们块级元素只设置上下其中的一个margin就好了，避免margin塌陷。

 

二、包裹元素塌陷

html

<div class="p">
<div class="c">
我是子元素
</div>
</div>

css

.p {background: #fff;margin: 10px;}
.p .c {padding: 5px;background: #f00;margin: 20px;}

结果

当标签没有任何内容填充或者padding跟border时，它的高度由子元素的高度（包含了padding和border）决定，

这个时候，父元素跟子元素之间的高度就一致，上下的margin就会发生重叠，同样值大者起效。

所以要避免这种情况就要对父元素进行处理：

填充内容；

添加padding；

添加border；

再有一种就是为父元素添加 overflow：hidden；