轉自：http://blog.chinaunix.net/uid-22414998-id-3138656.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的一處即可。
但對於父塊DIV內含子塊DIV的情況，就會按另一條CSS慣例來解釋了，那就是：對於有塊級子項目的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子項目頂部和底部邊框邊緣之間的距離。所以對於代碼：
<div 2、為父DIV添加padding，或者至少添加padding-top;
此外，還可以通過over-flow來解決，給父DIV寫入：over-flow:hidden;
希望對大家有所協助。
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
