CSS padding（填充）

内边距 padding 是指内容与边框之间的空白区域，负责让文字"透气"、把按钮撑得饱满。与透明的外边距不同，padding 会显示元素背景色，并且默认会把盒子"撑大"，是排版留白的第二把钥匙。

padding 与 margin 的分工

margin 管理盒子与盒子之间的距离（外侧），padding 管理内容与边框之间的距离（内侧）；两者最直观的区别是：背景色和边框都会覆盖 padding 区域，而 margin 永远是透明的。

div {
  background: #ffe0b2;   /* 橙色背景 */
  padding: 15px;         /* 背景会延伸到这块填充区 */
  margin: 10px;          /* 外边距区域不显示背景 */
}

padding 的简写：1~4 个值

与 margin 完全相同的顺时针规则（上右下左），也可以拆分成 padding-top/right/bottom/left：

.box { padding: 10px; }               /* 四边都是 10px */
.box { padding: 10px 20px; }          /* 上下 10px，左右 20px */
.box { padding: 5px 10px 15px; }      /* 上 5px，左右 10px，下 15px */
.box { padding: 5px 10px 15px 20px; } /* 上右下左 依次指定 */
/* 说明：以上仅为写法演示，实际使用时只保留其中一句 */

padding 会把盒子撑大

在默认的 content-box 模型下，padding 加在 width 之外，会直接撑大盒子，可能导致布局溢出：

div {
  width: 200px;
  padding: 20px;      /* 实际占位变成 200 + 20*2 = 240px */
}
/* 想让总宽保持 200px，请搭配 box-sizing:border-box */
div { width: 200px; padding: 20px; box-sizing: border-box; }

实际应用

padding 最常见的用途：给按钮加"内胆"让点击区域更大、更美观，给文字块留白，让表格单元格内容不贴边：

.btn {
  background: #1565c0;
  color: white;
  padding: 10px 24px;   /* 上下 10px、左右 24px，按钮显得饱满 */
  border-radius: 4px;
}
td { padding: 8px 12px; }  /* 单元格内容与边框保持距离 */

小结

padding 负责内容与边框之间的留白，方向与简写规则和 margin 一致，但它会显示背景并把盒子撑大；当需要"宽度可控"时，记得用 box-sizing:border-box 把 padding 收进宽度里。