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


<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,也就是默认情况下是不包含的。你可以理解为一个是说整个快递箱,一个是说快递的内容。

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