css padding属性怎么用

css的padding属性用于设置元素内容区域与边框之间的内边距，是css盒模型的核心属性之一，合理设置padding可以让元素内部的内容不会紧贴边框，提升页面的可读性和美观度。

padding属性的基本取值

padding属性支持多种取值方式，常见的取值类型有以下几种：

• 长度值：可以使用px、em、rem等单位，比如设置10px的内边距
• 百分比：百分比是相对于父元素的宽度计算的，会根据父元素宽度变化自适应
• auto：padding不支持auto取值，设置auto会被浏览器忽略
• inherit：继承父元素的padding值

单边padding设置方法

如果需要单独设置元素某一侧的内边距，可以使用对应的单边属性：

• padding-top：设置上内边距
• padding-right：设置右内边距
• padding-bottom：设置下内边距
• padding-left：设置左内边距

以下是单边设置的代码示例：

/* 单独设置上内边距为20px */
.box1 {
    padding-top: 20px;
}
/* 单独设置右内边距为1.5em */
.box2 {
    padding-right: 1.5em;
}
/* 单独设置下内边距为5% */
.box3 {
    padding-bottom: 5%;
}
/* 单独设置左内边距为inherit，继承父元素值 */
.box4 {
    padding-left: inherit;
}

padding简写规则

padding属性支持简写语法，通过一个属性同时设置四个方向的内边距，不同参数数量对应不同的规则：

简写规则的代码示例：

/* 1个值：四个方向都是15px */
.card {
    padding: 15px;
}
/* 2个值：上下20px，左右30px */
.header {
    padding: 20px 30px;
}
/* 3个值：上10px，左右25px，下15px */
.article {
    padding: 10px 25px 15px;
}
/* 4个值：上10px，右20px，下15px，左25px */
.footer {
    padding: 10px 20px 15px 25px;
}

padding对元素尺寸的影响

在标准盒模型中，元素的宽度和高度默认不包含padding和border，此时设置padding会增加元素的总尺寸。比如一个元素设置width为200px，padding为20px，那么元素的总宽度会变成200 + 20*2 = 240px。

如果设置了box-sizing: border-box，元素的width和height会包含padding和border，此时设置padding不会增加元素的总尺寸，只会压缩内容区域的大小。这个特性在布局时非常实用，可以避免计算元素总尺寸的麻烦。

以下是两种盒模型的对比示例：

/* 标准盒模型，总宽度240px */
.box-standard {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 1px solid #333;
    background-color: #f0f0f0;
}
/* border-box盒模型，总宽度还是200px，内容宽度变成200-20*2-1*2=158px */
.box-border {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 1px solid #333;
    background-color: #e0e0e0;
    box-sizing: border-box;
}

注意事项

• padding属性不能设置负值，设置负值会被浏览器忽略
• 行内元素设置上下padding在部分浏览器中不会影响行高，但是会显示背景色覆盖对应区域
• 百分比取值的padding始终是相对于父元素的宽度计算，即使设置的是上下padding也是如此

实际开发中建议优先使用简写语法设置padding，代码更简洁，同时根据布局需求选择合适的盒模型模式，可以减少很多尺寸计算的问题。

csspadding内边距盒模型样式布局修改时间：2026-07-14 03:15:24