Style padding 属性

在 web 前端开发中，我们经常需要调整元素的内边距(padding)来控制元素之间的间距以及元素内容与边框之间的距离。padding 属性是 CSS 中用来设置元素内边距的属性，它可以接受一个值、四个值、两个值或三个值来分别设置上、右、下、左四个方向的内边距。

语法

padding 属性的语法如下：

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

selector {
    padding: top right bottom left;
}

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

selector {
    padding: top right/left bottom;
}

• value：设置所有四个方向的内边距为同一个值。
• top、right、bottom、left：分别设置上、右、下、左四个方向的内边距。

单个值

当我们只设置一个值时，表示上、右、下、左四个方向的内边距都相等。示例代码如下：

.box {
    padding: 20px;
}

四个值

当我们设置四个值时，分别表示上、右、下、左四个方向的内边距。示例代码如下：

.box {
    padding: 10px 20px 30px 40px;
}

两个值

当我们设置两个值时，第一个值表示上、下方向的内边距，第二个值表示左、右方向的内边距。示例代码如下：

.box {
    padding: 15px 25px;
}

三个值

当我们设置三个值时，分别表示上方向、左右方向、下方向的内边距。示例代码如下：

.box {
    padding: 10px 20px 30px;
}

通过灵活运用 padding 属性，我们可以轻松控制元素之间的间距以及元素内容与边框之间的距离，提升页面的美观性和用户体验。