最近在做web頁面設(shè)計的時候，莫名的發(fā)現(xiàn)最上面會出現(xiàn)一個橫條，顏色為html的背景顏色。本意是那一片空橫條應(yīng)該為header的背景色。查了一些資料，發(fā)現(xiàn)是margin collapsing的問題，記錄下來，希望初學(xué)者少走彎路。
從問題說起
先給出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默認(rèn)margin-top值大于0，h1的top margin與header的top margin合并，合并之后的top margin又與body的top margin合并，html是根元素，不再繼續(xù)合并，所以那個橫條是body的margin，顏色為html的背景色。
解決辦法
解決辦法的思路有兩條。其一，去除margin，也就是把margin設(shè)置為0；其二是破壞margin collapsing。
margin設(shè)置為0
真的很簡單，代碼如下:
代碼如下:
h1{
margin-top: 0px;
}
破壞margin collapsing
這里的方法很多，只要是針對margin collapsing的規(guī)則，破壞其中的某一個或者多個環(huán)節(jié)。
設(shè)置父元素的overflow為auto或者h(yuǎn)idden，代碼如下:
代碼如下:
#header {
width: 100%;
height: 38%;
margin: 0px;
padding: 0px;
background-color: red;
overflow: auto;
}
設(shè)為非負(fù)padding，代碼如下:
代碼如下:
#header {
width: 100%;
height: 38%;
margin: 0px;
padding: 0px;
background-color: red;
padding-top: 0.1px;
}
設(shè)置border, 代碼如下：
代碼如下:
#header {
width: 100%;
height: 38%;
margin: 0px;
padding: 0px;
background-color: red;
border:1px solid red;
}