padding（内边距）是CSS盒模型中最基础也最常用的属性之一，它定义了元素内容区域与边框之间的空白距离。合理使用padding可以让页面元素拥有舒适的呼吸感，无论是按钮的文字留白、卡片的内部间距，还是表单控件的输入空间，都离不开padding的参与。理解padding的工作机制，是掌握CSS布局的第一步。
padding的基本语法与取值方式
padding属性可以分别针对四个方向设置：padding-top、padding-right、padding-bottom和padding-left，也可以使用padding简写一次性设置。padding不接受负值，这是它与margin的一个重要区别，最小只能为0。
简写形式遵循顺时针规则，从上开始依次为上、右、下、左：
/* 四个值：上 右 下 左 */ padding: 10px 20px 30px 40px; /* 三个值：上 左右 下 */ padding: 10px 20px 30px; /* 两个值：上下 左右 */ padding: 10px 20px; /* 一个值：四个方向相同 */ padding: 10px;
取值类型非常灵活，可以是固定长度单位（px、em、rem），也可以是百分比。值得注意的是，padding的百分比取值无论对应哪个方向，都是相对于父元素的宽度计算的，而不是高度。这一点常被用来实现正方形占位：设置padding-top: 100%即可得到一个宽高相等的容器，这是移动端适配中非常经典的技巧。
padding与盒模型：box-sizing的影响
理解padding必须结合盒模型。CSS中有两种盒模型：标准盒模型（content-box）和IE盒模型（border-box）。在标准盒模型下，元素的实际宽度等于width + padding + border；而在border-box模式下，width已经包含了padding和border，实际内容区会被压缩。
.box-a {
box-sizing: content-box; /* 默认值 */
width: 200px;
padding: 20px;
/* 实际占宽 = 200 + 20*2 = 240px */
}
.box-b {
box-sizing: border-box;
width: 200px;
padding: 20px;
/* 实际占宽仍是200px，内容区变为160px */
}在实际项目中，border-box通常更符合直觉，推荐在全局样式中统一设置：
*, *::before, *::after {
box-sizing: border-box;
}另一个需要关注的特性是，padding区域会被元素的背景色覆盖。也就是说，background会一直延伸到边框内侧，这也是为什么给按钮设置padding后，背景色会连着留白区域一起显示，视觉上形成了按钮的点击面积。如果希望背景只覆盖内容区，可以把背景设置在内部元素上，或者使用background-clip属性进行裁剪。
padding的常见应用场景与避坑指南
第一个典型场景是按钮和输入框。一个美观的按钮往往需要水平方向较大的padding、垂直方向较小的padding，例如padding: 8px 24px，这样文字周围有足够的留白，点击体验也更好。输入框则常用padding: 12px 16px保证输入内容不紧贴边框。
.btn {
padding: 8px 24px;
border: 1px solid #1677ff;
border-radius: 4px;
background: #1677ff;
color: #fff;
cursor: pointer;
}
.input {
padding: 12px 16px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}第二个场景是图文卡片布局。卡片内部的标题、正文与卡片边缘之间需要统一间距，通常会配合使用padding控制内边距，再配合margin控制卡片之间的外部间距，二者职责分明不能混用：padding管"里面"，margin管"外面"。
最后是几个常见的坑。其一，padding不支持负值，写成负数会被浏览器直接忽略；其二，行内元素的垂直padding会撑开背景，但不参与行高计算，可能遮挡相邻内容，遇到这类问题可以改用inline-block或flex布局；其三，如果发现元素宽度莫名变大，多半是content-box下padding叠加宽度导致的，切换box-sizing即可解决。掌握这些细节后，padding就能成为你手中最得心应手的间距控制工具。