CSS padding（填充）

padding（内边距 / 填充） 是元素内容区与边框之间的空白区域，在盒子模型里位于 border 内侧。设置 padding 可以让内容不贴边，阅读和点击区域更舒适。

基本用法

.box {
  padding: 20px;                /* 四边都是 20px */
  padding: 10px 20px;           /* 上下 10px，左右 20px */
  padding: 10px 20px 30px;      /* 上 左右 下 */
  padding: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */
}

单边：padding-top、padding-right、padding-bottom、padding-left。

---

常用值

• 长度：10px、1em、1rem
• 百分比：相对于父元素的宽度计算（四边都是），与 margin 一样
• 0：无内边距

注意：padding 不能为负值，也没有 auto。

---

与 width、box-sizing 的关系

在标准盒模型（content-box）下，你设置的 width 只表示内容区宽度，padding 会加在外面，元素总占位会变宽。例如：

.box {
  width: 200px;
  padding: 20px;
}

总宽度 = 200 + 20×2 = 240px。

若使用 box-sizing: border-box，则 width 已包含 padding，总宽度就是 200px，内容区会变小。

---

何时用 padding，何时用 margin？

• padding：元素内部留白，背景色和边框会包含 padding；点击区域也包含 padding。适合按钮、卡片内部留白。
• margin：元素与其它元素之间的间距，背景和边框不包含 margin。适合控制段落间距、模块之间的空隙。

简单记：里用 padding，外用 margin。

---

小结

• padding 是内容与边框之间的空白，在 border 内侧。
• 简写顺序：上 右 下 左；可为 px、em、rem、%，不能为负。
• 标准盒模型下 padding 会加大元素总占位；border-box 下 width 已含 padding。
• 内部留白用 padding，元素之间间距用 margin。

下一节学习 CSS 分组和嵌套：如何组织多条规则、减少重复。