CSS 内边距（padding）是控制元素内容与边框之间间距的核心属性，支持按方向灵活设置间距，尤其适合优化表格、按钮、卡片等元素的排版。本文结合表格实战案例，详解 padding 的取值规则，新手可直接复制代码上手。
一、CSS padding 核心代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS内边距（padding）实战</title>
<style type="text/css">
/* 表格单元格内边距：上下10px，左右20px（2个值的取值规则） */
td,th {
padding: 10px 20px;
}
</style>
</head>
<body>
<!-- 带内边距的表格，优化单元格内容排版 -->
<table border="1" width="500px" align="center" style="border-collapse: collapse;">
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center" valign="top" bgcolor="lightblue">
<td>一班</td>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>二、padding 取值规则（核心）
padding 支持设置 1-4 个值，按「上、右、下、左」顺时针顺序适配，是 CSS 边距的通用规则：
| 值的数量 | 应用规则 | 示例（padding） | 效果说明 |
|---|---|---|---|
| 1 个值 | 四个方向内边距相同 | padding: 10px; |
上 / 右 / 下 / 左均为 10px |
| 2 个值 | 第一个值 = 上下，第二个值 = 左右 | padding: 10px 20px;（示例用法） |
上下 10px，左右 20px |
| 3 个值 | 第一个值 = 上，第二个值 = 左右，第三个值 = 下 | padding: 5px 15px 10px; |
上 5px，左右 15px，下 10px |
| 4 个值 | 上 → 右 → 下 → 左（顺时针） | padding: 5px 10px 15px 20px; |
上 5px、右 10px、下 15px、左 20px |
补充：单独设置单方向内边距
若只需调整某一个方向的内边距，可使用单独属性，更精准控制：
/* 仅设置顶部内边距 */
th {
padding-top: 10px;
}
/* 仅设置右侧内边距 */
td {
padding-right: 20px;
}
/* 其他方向：padding-bottom、padding-left */三、实战注意事项
- 内边距不影响外部布局：padding 是元素 "内部" 的间距，不会改变元素与其他元素的距离（区别于 margin 外边距）；
- 表格适配优化：给 td/th 设置 padding 能避免单元格内容紧贴边框，提升表格可读性（示例中 10px 20px 的取值让文字与边框有足够间距）；
- 单位选择 ：优先使用
px（固定值，表格排版更稳定），也可使用em（相对字体大小），避免用百分比（表格中易适配混乱）； - border-collapse 影响 ：表格设置
border-collapse: collapse;（合并边框）后，padding 仍生效，不影响内边距规则。
四、典型应用场景
- 表格排版：给 td/th 设置 padding，优化单元格内容与边框的间距（示例场景）；
- 按钮样式 ：
padding: 8px 16px;（上下 8px，左右 16px），让按钮文字不紧贴边框； - 卡片布局 ：
padding: 20px;（四个方向相同），让卡片内内容与边框保持统一间距； - 表单元素：给 input/textarea 设置 padding，优化输入内容的显示位置。
总结
- CSS 内边距（padding）控制元素内容与边框的间距，取值规则为「上、右、下、左」顺时针顺序，支持 1-4 个值；
- 2 个值的用法（上下 左右）是实际开发中最常用的，尤其适合表格、按钮等元素；
- padding 是 "内部间距"，不会影响元素外部布局，是优化内容排版的核心属性。