开篇
块元素的上边距或下边距有时会合并为一个margin，这种情况称之为外边距的合并，即collapsing margins.
一个常见的css样式的bug
html&css：
<!DOCTYPE html>
<html>
<style type="text/css">
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#main {
width: 200px;
height: 200px;
background: yellow;
}
#sub {
color: #fff;
width: 200px;
padding: 0;
margin: 0;
margin-top: 20px;
background: black;
}
</style>
<body>
<div id="main">
<div id="sub">this is sub block</div>
</div>
</body>
</html>效果：
上图中父div包裹着子div，css的样式很明显想让子div与父容器有20px的margin－top，可是很不幸，父div和子div上边距重合了，而且莫名其妙的与body有了20px的上边距（body为白色背景区域）。
这个bug很常见，也经常被大家忽略，但是它却揭示了一个很重要的概念，即外边距合并（Collapsing margins）,想要彻底解决这个问题（当然了，你随便在chrome里修修改改也可以调好，但你懂真正的原因吗？），还是得看W3C的官方规范,为了易于阅读，我截取了一段源自MDN的翻译：
外边距合并发生在下面三种基本情形:
1.毗邻元素Adjacent siblings毗邻元素的外边距会合并（当靠后的元素 清除浮动 时除外)。
2.毗邻元素Adjacent siblings如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, 或 clearance 分隔，或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔，那么外边距会合并。
3.空块元素如果块元素 margin-top 与 margin-bottom 之间没有border, padding, inline content, height, 与min-height来分隔， 那么它的上下外边距合并。
可以看到，上面的bug属于情况2，即只要为主div设置padding即可解决(或border等，视具体情况而论)。
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2025-01-05 19:03:45