CSS padding 属性

在网页布局中，padding 属性用于设置元素内部内容与边框之间的空白区域。padding 可以为一个值，也可以为四个值（分别表示上、右、下、左四个方向的内边距），还可以为两个值（分别表示上下内边距和左右内边距）。

语法

-- -------------------- ---- -------
-------- -
    -------- ------
-

-------- -
    -------- --- ----- ------ -----
-

-------- -
    -------- ---------- -----------
-
展开代码

• value：可以为长度值（如 px、em、rem）、百分比（相对于包含块的宽度）、auto、inherit 等。

示例

设置相同的内边距

div {
    padding: 20px;
}

设置不同方向的内边距

div {
    padding: 10px 20px 15px 30px;
}

设置上下和左右的内边距

div {
    padding: 10px 20px;
}

设置百分比的内边距

div {
    padding: 5% 10%;
}

使用 inherit 继承父元素的内边距

div {
    padding: inherit;
}

注意事项

• padding 可以为负值，但不推荐使用。
• 内边距会增加元素的尺寸，需谨慎使用。