標籤：css w3c margin 塌陷
來源：http://www.ido321.com/387.html
<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title></title> <metaname=""content=""><style>*{margin:0px;padding:0px;}#no1{background:#808000;width:300px;height:300px;margin:100px 0 0 100px;}#no2{background:#c0c0c0;width:150px;height:150px;margin-left:20px;margin-top:30px;}</style></head><body><div id="no1"><div id="no2">Span2</div></div></body></html>如果您認為應該是這樣的話：
那就錯了。結果是這樣的：
因為CSS中存在一個margin collapse，即邊界塌陷或者說邊界重疊。對於上下兩個並列
的div塊而言，上面div的margin-bottom和下面div的margin- top會塌陷，也就是會取上下
兩者margin裡最大值作為顯示值，所以從這個意義上說：CSS及瀏覽器的設計者們希望
我們在布局時，如果遇到上下兩個並排內容塊的安排，最好只設定其中每個塊上或下
margin的一處即可。w3school也規定：當兩個垂直外邊距相遇時，它們將形成一個外
邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。
但對於父塊DIV內含子塊DIV的情況，就會按另一條CSS慣例來解釋了，那就是：對於
有塊級子項目的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子
元素頂部和底部邊框邊緣之間的距離。所以對於代碼：
1: <div class="father"></div>
father這個div的高度為0，因為裡面沒有能夠撐開div的內容。如果變為：
1: <div class="father">I am here.</div>
則高度就是文字的高度，因為此時文字在撐著這個DIV。
話說回來，一個DIV和它的子DIV特別重視垂直邊框或填充，也就好像是，一口鍋，裡
面放個盆，能不能扣住裡面的盆，主要看鍋蓋了，垂直邊框或填充就是這個“鍋蓋”。於
是解決的方式至少有以下三種：
1、需要給父div設定邊框，當然可以設定邊框為透明：
1: border:1px solid transparent
2: 或
3: border-top:1px solid transparent
2、為父DIV添加padding，或者至少添加padding-top;
1: padding:1px
2: 或
3: padding-top:1px; /*必須大於0*/
3、為父DIV添加overflow:hidden
1: over-flow:hidden;
問題與對策：CSS的margin塌陷（collapse）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
