最近在做web頁面設計的時候，莫名的發現最上面會出現一個橫條，顏色為html的背景顏色。本意是那一片空橫條應該為header的背景色。查了一些資料，發現是margin collapsing的問題，記錄下來，希望初學者少走彎路。
從問題說起先給出demo的源碼和截屏，給出一個直觀的印象。代碼如下:
<!DOCTYPE html><html><head> <style type="text/css"> html { width: 100%; height: 100%; max-height: 100%; margin: 0px; padding: 0px; background-color: blue; } body { width: 100%; height: 100%; max-height: 100%; margin: 0px; padding: 0px; background-color: orange; } #header { width: 100%; height: 38%; margin: 0px; padding: 0px; background-color: red; } #main { width: 100%; height: 62%; margin: 0px; padding: 0px; background-color: green; } #container { width: 80%; max-width: 864px; margin: 0px; padding: 0px; background-color: green; } #footer { width: 100%; height: 38%; margin: 0; padding: 0; background-color: gray; } </style></head><body> <div id="header"> <h1>Hello</h1> </div> <div id="main"> <div id="container"> </div> </div> <div id="footer"> </div></body></html>
截屏如下(注意最上面的藍色橫條，本想設計為紅色):
margin collapsing，邊界合并。h1預設margin-top值大於0，h1的top margin與header的top margin合并，合并之後的top margin又與body的top margin合并，html是根項目，不再繼續合并，所以那個橫條是body的margin，顏色為html的背景色。
解決辦法解決辦法的思路有兩條。其一，去除margin，也就是把margin設定為0；其二是破壞margin collapsing。
margin設定為0真的很簡單，代碼如下:
h1{ margin-top: 0px;}破壞margin collapsing
這裡的方法很多，只要是針對margin collapsing的規則，破壞其中的某一個或者多個環節。
設定父元素的overflow為auto或者hidden，代碼如下:
#header { width: 100%; height: 38%; margin: 0px; padding: 0px; background-color: red; overflow: auto;}
設為非負padding，代碼如下:
#header { width: 100%; height: 38%; margin: 0px; padding: 0px; background-color: red; padding-top: 0.1px;}
設定border, 代碼如下：
#header { width: 100%; height: 38%; margin: 0px; padding: 0px; background-color: red; border:1px solid red;}參考連結
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
