子元素margin-top为何会影响父元素？

╰半橙微兮° 2022-07-15 01:37 201阅读 0赞

问题如下  
一段很简单的代码：

css如下：

html结构如下

<div class="show">
            <h2>crystal</h2>
        </div>

当在`<h2>crystal</h2>`没有设置`margin-top`时，浏览器显示如预期  
![这里写图片描述][20161028110519104]

设置了`margin-top`后出现了如下所示的现象：  
![这里写图片描述][20161028110553417]

我们并没有给外层的div设置margin-top，但是还是距离浏览器最顶部产生了50px的间距，查看这50px间距属于哪个元素，会发现外层div的margin依然是0 auto; 所以这个margin还是属于h2,为什么会这样？

来看css2.1盒模型中规定的内容：

> In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

因为嵌套也属于毗邻，所以在样式表中**优先级更高**的 `.show h2`的margin覆盖了之前外层div定义的margin，导致最终整个div产生10px的间距。  
若给h2也添加一个class，并且在`.show`之前定义，则最终结果如第一个图所示，最终margin显示为0；

解决办法：

**1. 父级或子元素使用浮动或者绝对定位absolute**

浮动或绝对定位不参与margin的折叠

**2. 父级overflow:hidden;**

**3. 父级设置padding（破坏非空白的折叠条件）**

**4. 父级设置border**

资料多数参考如下文章：[http://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html][http_www.cnblogs.com_hejia_archive_2013_05_26_3099697.html]

[20161028110519104]: /images/20220715/65f3ab8b83d24f118e557894eb91b91a.png
[20161028110553417]: /images/20220715/80f530d041b044e2aaf4766e4729adb2.png
[http_www.cnblogs.com_hejia_archive_2013_05_26_3099697.html]: http://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html