<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* { padding:0; margin:0;}
body { width:400px; height:400px; border:1px solid black; }
#outer { width:300px; height:200px; background:red;}
#main { width:100px; height:100px; background:blue; margin-top:10px;}
</style>
<script>
</script>
</head>
<body>
<div id="outer">
<div id="main"></div>
</div>
</body>
</html>
很简单的代码，给#main增加了margin-top:10px;来把它往下移动10px。但是打开网页一看，发现并不简单……
可以看见不止是蓝色背景的div往下移动10px，而是蓝色背景的div跟着父元素一起往下移动10px;这是为什么呢？百思不得其解，只好查阅资料。
W3Cschool中找到相关的解释：外边距合并，当2个垂直外边距相遇时，他们将形成一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。
外边距合并的条件
- 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
- 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
- 当一个空元素没有边框或填充时，上下外边距碰到了一起，也会发生合并。
接下来验证margin-bottom是否也存在合并的问题：给蓝色背景设置：height:200px; margin-bottom:10px;
使得下外边距重叠并且向上移动10px;
可以明显看出蓝色背景div并没有移动，说明我们的想法是正确；那么要怎么解决呢？
避免外边距合并
- 给父元素添加padding-top来替代margin-top但是有时这种效果并不是我们想要的；
- 给父元素添加样式：overflow:hidden;
- 给父元素添加border。如果不想要border显示的话，可以设置border:1px solid transprent;这样边框就是隐藏起来。
- 将其设为浮动元素或绝对定位。
4169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
