爽爽国产色AV免费看,av无码高清不卡

css的margin collapsing導致最上面會出現一個橫條

來源：易賢網閱讀：1339 次日期：2014-08-14 16:30:18

溫馨提示：易賢網小編為您整理了“css的margin collapsing導致最上面會出現一個橫條”,方便廣大網友查閱！

最近在做web頁面設計的時候，莫名的發(fā)現最上面會出現一個橫條，顏色為html的背景顏色。本意是那一片空橫條應該為header的背景色。查了一些資料，發(fā)現是margin collapsing的問題，記錄下來，希望初學者少走彎路。

從問題說起

先給出demo的源碼和截屏，給出一個直觀的印象。代碼如下:

代碼如下:

<!DOCTYPE html>

<html>

<head>

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>

<h1>Hello</h1>

</div>

</div>

</div>

</body>

</html>

問題的原因

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，代碼如下:

代碼如下: