关于盒子模型中margin叠加现象的归类与思考

客官°小女子只卖身不卖艺 2022-05-18 07:57 161阅读 0赞

## **问题由来** ##

在对嵌套元素的子元素进行垂直方向上的居中操作时，采用margin-top会出现父元素和子元素一同下移的现象无法达到想要的效果。

<div id="father">
        <div id="son"></div>
    </div>

/*部分css代码块*/
       #son {
               background-color: #5A688F;
               width:50px;
               height: 50px;
               margin-left: 25px;/*子元素水平居中*/
               margin-top: 25px;/*试图将子元素垂直居中*/
            }

第一幅图是未设置margin-top: 25px;时的效果图：  
![这里写图片描述][70]  
第二幅图是设置了 margin-top: 25px;之后的效果图  
![这里写图片描述][70 1]  
**分析**：从第二张图片中可以看出来父元素和子元素一起发生了下移现象，没有达到子元素垂直居中的效果。整个现象的造成涉及到外边框叠加的现象。接下来进行分析

**外边距叠加定义：**  
外边距叠加指的是在普通文档流中的块级元素的垂直外边距出现叠加现象。而要特别注意的是：行内框，浮动框，或者绝对定位框的外边距是不会叠加的。

## 场景一： ##

**相邻块级元素垂直外边距叠加**  
![这里写图片描述][70 2]

/*部分css代码块*/
    #d1 {
            background-color: #5A688F;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-bottom: 20px;
            }
    #d2 {
            background-color: yellow;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-top: 20px;
            }

如图，当两个块级元素垂直摆放时时，他们的外边距不是40px而是叠加后的20px。（如果一大一下，叠加后的边距为大的那一个）；  
\*\*原理分析：\*\*实际上外边距叠加的意义非常的大，margin的存在意义是将两个相邻的元素分隔开来。如果不出现外边距叠加，那么像上边的两个相邻元素的垂直距离就已经是40px了，浏览器不允许造成如此大的浪费，所以出现了垂直距离上的外边距叠加，在进行网页布局的计算的时候一定要注意。

## 场景二： ##

**嵌套元素中的外边距叠加现象：**  
在场景一中已经分析得出来外边距叠加的时候最终的距离是最大的那一个。  
**注意：**  
这里涉及到一个特性，块元素的margin外边距非常的嚣张，在他附近存在元素的时候，他就一定要凑上去，从相邻元素的padding或者border开始撑开margin距离，如果相邻的元素没有padding和border，那就会一直顶到content。

**请耐心听我哔哔！！！**

因此，我用上边的特性来解释一开始出现的那个问题，父元素没有padding和border，所以给子元素设置margin-top的时候，子元素这往上一顶就没有丝毫阻拦的直接顶到了body上，一个margin-top就想撑开25px；话说，力的作用是相互的。这就相当于父元素上边的元素设置了一个margin-bottom反作用给父元素，想将它推开25px；可是由于父元素没有border和padding，所以就会直接作用在父元素的content内容区上，但是父元素的content内容区就是子元素的区域，子元素也没有padding和border直接作用在了子元素身上；也就是说，我这一巴掌直接打到了两个人的脸上，所以他们同时向下移动25px；

**解决办法：**  
1）给父元素增加一个border  
2）给父元素增加一个padding-top  
\*\*注意：\*\*上述两个方法都是为了制止子元素margin的嚣张气焰。但是在标准盒子模型下改变padding和border会将盒子模型的布局整个都会改变，所以不提倡使用；  
3）给父元素添加overflow：hidden属性，浏览器有可能是担心子元素设置的margin-top太大，将自己撑出了父元素的范围，所以就会自动下移，此时设置overflow属性就会将父元素的躁动强行按下！

## 场景三： ##

第三种场景是一个空元素（没有padding和border）的margin-top，margin-bottom也会叠加起来。举这个例子就有点为难我胖虎了。。。。结论就是==这就是一系列空的段落元素占用的空间非常小的原因了。

## 最后的总结 ##

1）外边距叠加不止发生在同等级的块级元素，还发生在嵌套的元素身上。  
2）空元素的上下margin也会出现合并的现象。

**存在即是合理，分开即是不合适，透过现象看本质，扎实基础。**

[70]: /images/20220518/ced2e037a8d04b3398c19467555b4fe8.png
[70 1]: /images/20220518/43dea353ee7a46cfbe688a4f6f95e830.png
[70 2]: /images/20220518/d0d8c3658c134c6b9e41d2531fecfebe.png