CSS外边距属性，深入理解margin

2023-08-19 16:06:16

margin

See the Pen margin by wmui (@wmui) on CodePen.

该属性用于设置元素的外边距，外边距是透明的，默认值0。这是一个简写属性，属性值最多为4个，例如margin: 10px 15px 10px 15px，分别表示上外边距、右外边距、下外边距、左外边距。属性值也可以是3个，例如margin: 10px 15px 10px，表示上外边距、左右外边距、下外边距。属性值可以为2个，例如margin: 10px 15px，表示上下外边距、左右外边距。属性值可以为1个，例如margin: 10px，表示四边外边距。外边距也可以单独设置，margin-top上外边距，margin-right右外边距，margin-bottom下外边距，margin-left做外边距。属性值可以是auto，浏览器自动计算外边距，块级元素会水平居中显示，如例1，至于为何水平方向居中，垂直方向未居中，这个下面细说。属性值可以是百分比，百分比是基于父元素的宽度计算的，在例2中为子元素设置了margin: 50%。属性值可以是CSS长度单位，值可以是负值。属性值可以是inherit。

外边距叠加

说明：普通文档流中，垂直排列的两个块级盒子（非父子），他们的上外边距或者下外边距会出现叠加，会以两者中外边距较大的那个为准，左右外边距不会叠加。

情况一：上面的例3和例4演示了这个现象，例3margin: 50px，例4margin: 30px，最后两个盒子之间的距离为50px，要想发生叠加需要满足以下条件：

1.只发生在块级元素且是普通流（inline-block元素不会叠加）

2.只发生在垂直方向上

情况二：上面的例2中父子嵌套的两个盒子，父元素和第一个子元素或最后一个子元素也会发生叠加效果，在例2中大盒子的外边距默认为0，而里面的小盒子上外边距50%（即100px），最终两个盒子的上外边距都是100px，父子嵌套的盒子需要满足以下条件才会发生外边距叠加：

父元素非BFC元素
父元素没有padding-top值
父元素没有border-top值
父元素和第一个子元素间没有inline元素间隔

细心观察发现下外边距没有发生叠加，margin-bottom发生叠加需要满足另一个条件，上面的第四条改为：父元素和最后一个子元素之间没有inline元素分隔，以及父元素没有height、min-height、max-height限制。

情况三：如果一个盒子没有任何内容也没有高度，这个盒子真身也会出现外边距叠加，例如：

<div style="margin: 30px 0;"></div>

这个盒子的上下边距最终是30px，需要满足以下条件空盒子才会发生叠加：

1.没有border

2.没有padding

3.没有内容和高度

margin: auto无法实现垂直居中

拿例1先说，为什么能实现水平居中？这是因为子盒子是一个块级元素，它的宽度默认是等于父盒子的宽度，于是子盒子和父盒子之间就有了联系，当给子盒子固定宽度后，margin: auto能平分剩余空间

在垂直方向上，子盒子的初始高度是不确定的，它是根据内容的高度撑开的，这样父盒子和子盒子就无法建立联系，所以margin: auto在垂直方向上会被重置为0，初始高度不等于设置的高度。

margin: auto无法实现图片水平居中

类似块级元素无法实现垂直居中的原因，图片的宽度默认等于自身，无法和父盒子建立联系，所以左右的外边距会被重置为0。解决方法，给图片设置display: block让图片容器占满父盒子

行内元素垂直外边距无效

对于行内元素（inline），垂直方向上的排列布局是通过line-height, vertical-align来影响的，margin值在垂直方向不会影响他们，但是水平方向可是有效的。还有一些元素，如<thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <colgroup>这些和表格相关的元素设置margin是无效的

理解BFC

EFC(Block Formatting Content)，块级格式化上下文，可简单理解为块级盒子在页面中的一块渲染区域，这块区域可以看做一个独立的容器，容器里面的元素不会影响到外边的元素，网页布局常见的文档流有普通文档流、浮动流和定位流三种，FC就是普通流。

BFC触发条件

元素的float值不为none
overflow值不为visible
display值为inline-block、table-cell、table-caption
position值为absolute、fixed

满足上面的任一个条件都可触发BFC

BFC的作用

See the Pen BFC by wmui (@wmui) on CodePen.

作用1：触发元素的BFC，使该元素不被浮动元素覆盖

例1中黄色的盒子浮动了，导致遮盖住了普通流中的红色盒子，此时只要触发红色盒子的BFC，黄色盒子就不会覆盖红色盒子了。

作用2：包含浮动元素

在例2中，红色父盒子在普通流中，黄色子盒子浮动了，父盒子无法包围子盒子，触发父盒子的BFC，使父盒子包围子盒子

作用3：阻止外边距叠加

在例3中是常见的外边距叠加情况，触发任一个盒子的BFC，即可阻止外边距叠加，但并不是只有触发BFC才能阻止叠加。

有一种情况有些特殊，当使用overflow: hidden阻止叠加时，需要为子盒子的父元素设置这一属性，例如：

 <div style="margin-bottom: 20px;">TEST</div>

 <div style="overflow: hidden">

  <div style="margin-bottom: 20px;">TEST</div>

</div>

阻止外边距叠加

除了触发BFC可以阻止外边距叠加，还有其他方法，上面说过触发外边距叠加需要满足一些条件，我只要违背那些条件自然就可以阻止外边距叠加了。对于父子嵌套叠加，我可以为父元素设置border或padding，也可以添加一个行内元素作为第一个子元素（必须要有内容），还可以触发子元素或父元素的BFC。对于非父子嵌套的外边距叠加，这其实是一种正常的布局效果，如果非要阻止叠加，那就触发BFC，设置border或padding是不能阻止其叠加的，只有触发BFC

码农公寓