css margin塌陷問題

html

block1

block2
同級元素1        
同級元素2
同級元素3

body

.block1 
.block2 
.ib 

圖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

我是子元素

.p 

.p .c 

當標籤沒有任何內容填充或者padding跟border時，它的高度由子元素的高度（包含了padding和border）決定，

這個時候，父元素跟子元素之間的高度就一致，上下的margin就會發生重疊，同樣值大者起效。

所以要避免這種情況就要對父元素進行處理：

填充內容；

新增padding；

新增border；

再有一種就是為父元素新增 overflow：hidden；

css margin塌陷問題

垂直並列 先設定兩個div，並分別設定寬高背景色。挨著不太好看，在原來樣式的基礎上給兩個div設定margin box1設定margin bottom 40px box2設定margin top 20px box1 box2 按照正常的思維40 20 60，所以box1和box2的邊距應該是60px...

CSS margin帶來的塌陷問題

塌陷問題 就是當父元素包裹子元素時，子元素設定margin top時，並不是子元素上邊距離父元素上邊一段距離，而是子元素和父元素同時距離bfc 塊級格式上下文 下邊的距離 如下body 解決塌陷問題1.給父盒子新增border 2.給父盒子新增padding top 3.給父盒子新增overflow...

CSS Margin塌陷和盒子居中

margin的塌陷現象 標準文件流中，豎直方向的margin不疊加，以較大的為準。水平方向的疊加 哈哈哈哈 嘿嘿嘿嘿 如果不在標準流，比如盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的 div.p1 p2兩個盒子都浮動了，所以沒有塌陷現象了，margin bottom 40px 和margin to...