第五十七章 内补

我们说了好久盒子，却并没给盒子里装过什么东西。那今天我们来 试一下吧~

<div id="a-box">假装这里装满了老鼠喜欢的东东，咖啡，可乐，巧克力，软软的枕头，暖暖的被窝，还有满缸的大米……</div>

#a-box {border: 3px solid orange;}

假装这里装满了老鼠喜欢的东东，咖啡，可乐，巧克力，软软的枕头，暖暖的被窝，还有满缸的大米……

这很简单，不值得说什么。

但是，这都是小老鼠喜爱而且珍爱，为之疯狂奋斗的东东啊~这么放在盒子里，看着很紧张，很压迫，从设计上讲，这不好看；从物流的角度讲，这容易摔坏……小老鼠就很着急了。

怎么解决呢？从设计上讲，我们需要留白，需要出血位；从快递的角度上说，我们需要填充物……这，很讲道理。

总之，就是在盒子的内部，补充一些空白。这就是“内补”，写作 padding，我们来试试。

#a-box {border: 3px solid orange;padding: 10px;}

假装这里装满了老鼠喜欢的东东，咖啡，可乐，巧克力，软软的枕头，暖暖的被窝，还有满缸的大米……

一下子就舒服了吧~就这么点事情，不用想的很复杂。但你会发现，这是四个方向的问题。所以这又是一个复合属性，可以拆分成上下左右，就不多说了，和前面边框差不多，也可以两个值、三个值、四个值。

然后，虽然这是填充物的位置，但是它算不算盒子里面？当然算了，所以，它下面也有盒子底托着吧……咳咳，是挺废话的，没有哪个盒子的底四面不挨着。我是说啊，背景也会延伸到内补的位置滴。

那么，高深的问题就来了：背景会不会延伸到边框下面？答案是会的。不过上面这些并不绝对……啊啊，这话我说的好多，可是没办法啊，这世界上没什么事情是绝对的啊。我们可以通过 background-clip 属性来设置背景图片的延伸范围。这个属性我们没讲，你们自己去查手册吧~喵唧！

还有一个问题……box-sizing 设置为 border-box 的时候，包不包括内补？既然连边框都包含了，那么在边框里面的内补自然也是无处可逃的被包括了。但是 content-box，也就是默认情况下是不包含的。你可以理解为一个是说整个快递箱，一个是说快递的内容。