填充 - CSS

简介

在 CSS 中填充指的是增加元素的内部空间，一般用于修饰元素的外观。填充的值可以为一个数值，也可以为一个方向性的值（上下左右）。

语法

padding: 上 右 下 左;

其中，上、右、下、左的值可以为 px、%、em 等单位。

也可以使用以下语法：

padding-top: 10px;
padding-right: 5%;
padding-bottom: 20px;
padding-left: 5%;

样例

以下样例将给出填充的具体用法：

/* 基础样式 */
div {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  height: 80px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* 带填充的样式 */
.fill {
  padding: 20px;
}

/* 不同方向的填充 */
.top {
  padding-top: 20px;
}

.right {
  padding-right: 20px;
}

.bottom {
  padding-bottom: 20px;
}

.left {
  padding-left: 20px;
}

/* 不同单位的填充值 */
.px {
  padding: 20px;
}

.percentage {
  padding: 10%;
}

.em {
  padding: 1em;
}

示例效果

以下是上述样例的渲染效果：

以上即为填充的基本用法，可以自由变换方向、单位以及数值大小进行定制化的设计。