溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么解決css的margin collapsing導致最上面會出現一個橫條的問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么解決css的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">
<h2>Hello</h2>
</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，邊界合并。h2默認margin-top值大于0，h2的top margin與header的top margin合并，合并之后的top margin又與body的top margin合并，html是根元素，不再繼續合并，所以那個橫條是body的margin，顏色為html的背景色。
解決辦法
解決辦法的思路有兩條。其一，去除margin，也就是把margin設置為0；其二是破壞margin collapsing。
margin設置為0
真的很簡單，代碼如下:
代碼如下:
h2{
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;
}
到此，相信大家對“怎么解決css的margin collapsing導致最上面會出現一個橫條的問題”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
