Question

CSS 为什么内margin会导致外margin具有边距？

#wai{
width: 500px;
height: 500px;
background: red;
}

#nei{
width: 200px;
height: 200px;
background: pink;
margin: 20px;

}

Answer 1

css外边距自动合并

比如：
p{margin:15px 0;}
<p>段落一</p>
<p>段落二</p>

这时浏览器会把 段落一 和 段落二 之间的距离合并为：15px
而不是：段落一底部15px + 段落二顶部15px = 30px
这个上下外边距自动合并的由来是为了排版上美观的需要而产生的

你遇到的是浏览器在不该合并上下外边距的时候去错误的合并了外边距，导致解析出错误的边界。

解决方法很多，自行百度下，加点边框什么的都能解决。

追问

可能是我表述得不完整 我的HTML的内容是这样的

是一个DIV里面又有一个DIV
里面的DIV设置MARGIN 结果导致外面的DIV也产生了MARGIN，很奇怪。

追答

其实你抓图说得很清楚，很明显就是这个问题。只是我回答的你没概念所以没理解进去。
我说的和 三间北房 说的都是同一个事。

你先百度下：css外边距自动合并，这个东西，有很多配图的说明，看懂了你就明白了。

问题的关键就是里面的div没顶边距，而是跑到外面div的顶部了。因为外边距自动合并的时候，浏览器错误的把外边距弄到外层div上的。

Answer 2

根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

常用的解决方法就是给wai加上overflow:hidden;

有兴趣可以百度一下haslayout和子元素绑架父元素的margin-top