Question

CSS给子元素设置了上外边距，为什么会跑到父元素外边去呢？

.a{width:500px;height:200px;}
.b{width:400px;height:100px;margin:20px auto;}
<div class="a">
<div class="b">

为什么我的上边距会跑到a的外边去呢？为什么只要给a加个边框，我就正常显示了呢？求解。

</div>

</div>

Answer 1

css外边距自动合并 导致的一个bug，你的解决方法是对的，或者加内边距也可，阻止外边距自动合并发生就行了，你可以自己百度下相关知识。

这个bug不是普遍的，有些浏览器有，有些没有(记不着哪些有了，你可以自己测试)

外边距自动合并的原理：

<div id="txt">
<p>一篇文章，结构很可能是这样</p>
<p>这篇文章有很多段落，这是第二段文字</p>
<p>段落.......</p>
</div>

这时候为了文字排版好看，通常都会给给 p 来点上、下外边距，让段落间拉出段空白来。比如给 p 上、下各 15px 的外边距：

#txt p{margin:15px 0;}

这时两个挨着的段落之间的空白部分距离是多少？
第一段下边距 15px + 第二段上边距 15px = 30px 加起来等于 30px 对不？等于 30px 的话排版就难看了。

实际上浏览器为了解决这个排版问题，把这两个边距强制合并了(而不是简单的做加法运算)，实际上下两段之间距离是：15px

这个就是：外边距自动合并，是一个很有用的功能，基本上能解析 css 的浏览器都能自动合并这种外边距。

然后你遇到的错误是：某些浏览器在不该 自动合并外边距时 去帮你合并了，合并的顺序是把下面一块往上面挤，就挤到父元素的外边去了。

追问

谢谢

Answer 2

css外边距自动合并 导致的一个bug，你的解决方法是对的，或者加内边距也可，阻止外边距自动合并发生就行了，你可以自己百度下相关知识。

这个bug不是普遍的，有些浏览器有，有些没有(记不着哪些有了，你可以自己测试)

外边距自动合并的原理：

<div id="txt">
<p>一篇文章，结构很可能是这样</p>
<p>这篇文章有很多段落，这是第二段文字</p>
<p>段落.......</p>
</div>

这时候为了文字排版好看，通常都会给给 p 来点上、下外边距，让段落间拉出段空白来。比如给 p 上、下各 15px 的外边距：

#txt p{margin:15px 0;}

这时两个挨着的段落之间的空白部分距离是多少？
第一段下边距 15px + 第二段上边距 15px = 30px 加起来等于 30px 对不？等于 30px 的话排版就难看了。

实际上浏览器为了解决这个排版问题，把这两个边距强制合并了(而不是简单的做加法运算)，实际上下两段之间距离是：15px

这个就是：外边距自动合并，是一个很有用的功能，基本上能解析 css 的浏览器都能自动合并这种外边距。

然后你遇到的错误是：某些浏览器在不该 自动合并外边距时 去帮你合并了，合并的顺序是把下面一块往上面挤，就挤到父元素的外边去了。

Answer 3

这种情况是正常的
当第一个子元素设定了上外边距，这个上外边距的确会跑到父元素外面

至于原因我自己没有研究，只是平时做的时候都有这种现象。
你可以自行百度下“margin 父元素”，大概跟这个有关collapsing margins

Answer 4

给a 元素 添加一个 overflow：hidden；就可以了...