最近在做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>
截屏如下(注意最上面的藍色橫條，本想設計為紅色):
http://img.blog.csdn.Net/20140521114915156?watermark/2/text/aHR0cDovL2JSb2cuY3Nkbi5uZXQva2lteWxyb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
問題的原因
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;
}