最近在做web頁面設計的時候，莫名的發(fā)現(xiàn)最上面會出現(xiàn)一個橫條，顏色為html的背景顏色。本意是那一片空橫條應該為header的背景色。查了一些資料，發(fā)現(xiàn)是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是根元素，不再繼續(xù)合并，所以那個橫條是body的margin，顏色為html的背景色。
解決辦法
解決辦法的思路有兩條。其一，去除margin，也就是把margin設置為0；其二是破壞margin collapsing。
margin設置為0
真的很簡單，代碼如下:
h1{
margin-top: 0px;
}
破壞margin collapsing
這里的方法很多，只要是針對margin collapsing的規(guī)則，破壞其中的某一個或者多個環(huán)節(jié)。
設置父元素的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;
新聞熱點
疑難解答
