前两天，一个朋友问我一个关于外边距的问题，他的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin:0px;
padding:0px;
background:black;
}
.outbox{
background-color:yellow;
width:200px;
height:200px;
}
.innerbox{
width:100px;
height:100px;
background:red;
margin-top:20px;
}
</style>
</head>
<body>
<div class="outbox">
<div class="innerbox"></div>
</div>
</body>
</html>
结果如下：
他本意是想让里面红色的div距离外面黄色的div高度20像素，设置了外边距margin-top:20px，结果外面黄色的div也一起下来了，距离外面body高度20像素了。
这里涉及到一个知识点，外边距合并。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
上面出现的结果就是因为外边距合并了，外面的div没有设置外边距，里面的设置了margin-top，二者的外边距合并成了一个外边距，高度以里面设置的外边距为准。
出现外边距合并的情况有以下几种
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上下外边距会发生合并。如下图：
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如下图：
当一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并，如下图：
如果这个外边距遇到另一个元素的外边距，它还会发生合并，如下图：
虽然外边距合并会给我们造成一些小困扰，但是，有时候，它还是挺方便的，比如，我们在设置段落上下间距的时候，外边距合并就很有帮助，如下图：
我们给每个段落设置统一的margin样式就可以了，不用担心中间的段落会出现双倍的外边距。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
如果想看更多的技术文章，可以搜索微信公众号“刘小妞的栖息地”或者扫下面的图片去看。
扫一扫
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
