CSS padding 属性

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

语法

// www.javascriptcn.com code example
selector {
    padding: value;
}

selector {
    padding: top right bottom left;
}

selector {
    padding: top/bottom left/right;
}

• 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 可以为负值，但不推荐使用。
• 内边距会增加元素的尺寸，需谨慎使用。