10. 内边距padding

本节目标：掌握 padding 属性的用法，学会单独设置四边和使用简写属性。

什么是内边距

内边距是内容与边框之间的空白区域。它属于元素本身，会显示元素的背景颜色。

简单来说，内边距让内容”呼吸”，不会紧贴边框。

.box {
  padding: 20px;
  background: #ebf5fb;
  border: 2px solid #3498db;
}

上面这段代码，内容四周留出 20px 空白，背景色会填充到这个空白区域。

padding 和 margin 的区别

padding 在边框内侧，属于元素的一部分，显示背景色。margin 在边框外侧，是透明的，用来控制元素之间的距离。

记住这个区别，后面写布局会少踩很多坑。

CSS 提供了四个属性分别控制每条边的内边距：

用法很简单：

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

记得写单位

内边距值必须带单位，比如 px、em、%。不能写 padding: 20，要写 padding: 20px。

为了减少代码量，CSS 提供了 padding 简写属性。根据值的数量不同，含义也不同。

padding: 20px;  /* 上下左右都是 20px */

最常用，四个方向统一内边距。

padding: 10px 20px;
/* 上下 10px，左右 20px */

第一个值控制上下，第二个值控制左右。

padding: 10px 20px 15px;
/* 上 10px，左右 20px，下 15px */

padding: 10px 20px 15px 25px;
/* 上 10px，右 20px，下 15px，左 25px */

顺序是顺时针：上 -> 右 -> 下 -> 左。可以记成”时钟转一圈”。

记忆口诀

四个值顺时针，上右下左不会乱。三个值左右跟着走，两个值上下配左右。

padding 也可以用百分比。注意一个关键点：百分比是相对于父元素的宽度计算的。

.parent {
  width: 400px;
}

.child {
  padding: 10%;  /* 实际是 40px，基于父元素宽度 */
}

即使 padding-top 和 padding-bottom 的百分比，也是按父元素宽度算的，不是高度。这是 CSS 的规定。

padding 会影响元素的实际占用空间。默认情况下，padding 会加到 width 上。

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}

这个盒子实际占用的宽度是：200 + 202 + 22 = 244px。width 只控制内容区域，padding 和 border 往外撑。

如果希望 width 包含 padding，需要用 box-sizing 属性。这个在第 14 章会详细讲。

内边距不能为负

padding 的值不能写负数，写 padding: -10px 是无效的，浏览器会忽略它。

下一章我们讲边框 border，看看怎么给盒子加各种样式的边框。