子元素的margin-top属性为啥会影响父元素的margin-top?

Posted 2023-05-03

参考技术A 问题描述：

最近在开发中偶然遇到了一个问题那就是如下图：父级元素是个空的最外层包裹元素，子元素是内容，想控制子元素不从页面顶端开始，就给子元素设置一个margin-top：50px;没想到父元素也随之下移了。我们只知道相邻元素如果既有margin-bottm又有margin-top会产生margin塌陷，但是这又是为什么呢？

原因探索：

解读规范可知：相邻两个元素的margin会折叠（相邻包括兄弟元素也包括抚子元素），但是仍需满足以下几个条件：

必须是处于常规文档流（非float和绝对定位）的 块级盒子 ,并且处于同一个 BFC 当中。

*没有线盒，没有空隙（ clearance ，下面会讲到），没有padding和border将他们分隔开

*都属于垂直方向上相邻的外边距，可以是下面任意一种情况：

*元素的margin-top与其第一个常规文档流的子元素的margin-top

*元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top

*height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

解决办法 ：

根据以上原因分析可知，我们只需打破它合并的规则即可解决该问题：比如给子元素设置float/position属性使其脱离文档流，或者给父元素设置border／padding然后将其box-size属性设置为border-box/padding-box等等

子元素margin-top属性传递给父元素的问题

问题描述：
一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走，而子元素和父元素的边距则没有发生变化。

html结构：
<div class="box1"><div class="box1_1"></div></div>

css样式：
.box1{height:400px;background:#fad;}
.box1_1{height:100px;margin-top:50px;background:#ade;}

解决办法：
1.修改父元素的高度，增添padding-top样式模拟（常用）；
2.为父元素添加overflow:hidden;样式即可（完美）；
5.为父元素或者子元素声明浮动（可用）；
3.为父元素添加border（可用）;
4.添加额外的元素放在子元素最前面，设置高度为1px，overflow:hidden(若为行内元素，需要声明为块元素)（啰嗦）;
6.为父元素或者子元素声明绝对定位（……）。

 

原理

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

 

这就是原因了。“嵌套”的盒元素也算“毗邻”，也会 Collapsing Margins。这个合并Margin其实很常见，就是文章段落元素<p/>，并列很多个的时候，每一个都有上下1em的margin，但相邻的<p/>之间只会显示1em的间隔而不是相加的2em。这个很好理解，我就是奇怪为什么W3C要让嵌套的元素也共享Margin，想不出来在什么情况下需要这样的表现。 　　这个问题的避免方法很多，只要破坏它出现的条件就行。给Outer Div 加上 padding/border，或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。

 

在 IE/Win 中如果这个盒子有 layout 那么这种现象就不会发生了：似乎拥有 layout 会阻止其孩子的边距伸出包含容器之外。此外当 hasLayout = true 时，不论包含容器还是孩子元素，都会有边距计算错误的问题出现。

 

转载自：网络