Question

内部的div设置margin整体下移 上方留白？

两个div嵌套 给内部的div设置了margin 整体会下移并且上方会有空白给外部的div设置了 overflow:hidden 空白就消失了？什么原因造成的设置外边距会整体下移 overflow 不是控制文字超出的吗 却能解决空白的问题 这是什么原理





Answer 1

边距合并了解一下，前端基础来的啊。

在父级没有设置border 或 overflow 的情况下，子级的margin 会和父级的margin 合并起来(是合并，不是增加),也就是说假如，你设置了父级的margin-top为50px,子级设置的是 80px，那么由于边距合并，显示的就是 父级离顶部的距离为 80px ，解决边距合并的方法很多，最常用的是给父级设置  overflow:hidden；

除了这个方法，还可以通过设置浮动，定位, 设置padding 来替代等方法来解决边距合并问题。具体可以参考一下我写的博客，里面有具体的方法，解决边距合并问题：网页链接。

Answer 2

设置了overflow: hidden；浏览器检查容器宽高，识别内部margin。
一般不建议这样使用，内部应使用padding避免出现这种情况。