第五十八章 外补

与内补相对，不过是在边框外面的。就好像在快递箱外面再包裹上泡泡纸。诶，这个就可以使原本紧挨着的元素之间产生间距了。外补属性写作 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;}

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

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

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