CSS 内边距（padding）全解析：取值规则 + 表格实战

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 是 "内部间距"，不会影响元素外部布局，是优化内容排版的核心属性。