最近在做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;
}
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
