与内补相对,不过是在边框外面的。就好像在快递箱外面再包裹上泡泡纸。诶,这个就可以使原本紧挨着的元素之间产生间距了。外补属性写作 margin,其他和内补挺像的。

说到这里,这一章好像可以结束了……额,偷懒成功!毕竟效果什么的,你们自己试试就好了,而且我们后面练习也会使用它。但是它有一个特点,我们需要了解一下。

如果两个盒子,外补都是 10 像素。两个盒子放一起,那么盒子之间的距离是多少?

10+10=20,这好像是一道很简单的数学题。但是,如果这两个元素是并排摆放,确实是这样没错。而如果垂直摆放,那么这两者的内补会重叠起来(只是说相邻的边),那就是谁的大用谁的。现在一样大,那就是 10 像素。


<div class="box-margin"></div>
<div class="box-margin"></div>

.box-margin {
  height: 10px;
  margin: 10px;
  border: 3px solid orange;
}

这就很容易看出,间距和元素的高度相同。也就是上面盒子底部的外补,和下面盒子顶部的外补叠在了一起。

如果只是这样还好吧,但是……如果这个元素在父元素中是第一个或者最后一个元素的话,它和父元素的外补也能叠加,就……


<div class="box-just-border"></div>
<div class="box-parent">
  <div class="box-margin"></div>
</div>
<div class="box-just-border"></div>

.box-margin {
  height: 30px;
  margin: 10px;
  background: orange;
}
.box-just-border {
  height: 30px;
  background: #CCCCFF;
}
.box-parent {
  background: #CCFFCC;
}

我们看到父元素并没被子元素上下方向的外补撑开。而是在父元素外面形成了外补。左右则正常,符合我们的预期。

这就很难受。不过解决的方法也比较简单,给父元素设置上一个内补或者一个边框就行了。哪怕只有一像素,哪怕是透明的,都能解决问题。

但是……这很烦人诶,所以最简单的:垂直方向上,能用内补就不用外补。比如上面的例子,我们给父元素设置内补,就要比给子元素设置外补来的简单。

【本章助记卡片:卡片 for 第五十八章