小记css的margin collapsing

近期在做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

真的非常easy，代码例如以下:

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;
}

參考链接

Stackoverflow
W3C

转载于:https://www.cnblogs.com/zfyouxi/p/4212932.html