css margin塌陷問題

1、同級塊級元素塌陷

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起了做用；

再看塊級內聯元素，ib一、ib二、ib3，每一個ib之間的margin是10px；結果是每一個ib之間的左右和上下margin都有20px;

最後再看浮動的塊級元素：圖3，margin也是沒有塌陷的。

結論說明margin塌陷只發生在真正意義的塊級元素上（浮動跟那些inline-block不算），瀏覽器應該是但願咱們塊級元素只設置上下其中的一個margin就行了，避免margin塌陷。

 

2、包裹元素塌陷

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；