CSS 填充样式 - padding

CSS 的填充样式用于在元素内部创建空白区域，以增加元素与其边框之间的距离。

通过 padding 属性，我们可以设置元素的填充值，具体包括：

• padding-top：上方填充值
• padding-right：右侧填充值
• padding-bottom：下方填充值
• padding-left：左侧填充值

填充的值可以是具体像素值，也可以使用百分比。同时，我们还可以使用简写方法来设置四个填充值，顺序是上右下左。

以下是一些常用填充样式的示例代码片段：

四个方向填充 20 像素

padding: 20px;

上下方向填充 20 像素，左右方向填充 30 像素

padding: 20px 30px;

上方填充 10 像素，右侧填充 20 像素，下方填充 30 像素，左侧填充 40 像素

padding: 10px 20px 30px 40px;

上方填充 10% 的高度，左右方向填充 5% 的宽度

padding: 10% 5%;

填充样式的应用，有助于调整页面布局，使得页面元素之间的距离更加合适。在你的开发项目中，试着使用填充样式来优化界面，提高用户体验。