CSS | 填充属性

填充属性（padding）可以设置元素内部的留白空间，使内容与边框有一定的间距，从而使页面布局更加美观和易读。

语法

填充属性语法如下：

padding: 上 右 下 左;

也可以分别设置各个方向的填充：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

值

关于填充属性的值，有以下几种：

• length：以像素（px）、点（pt）、毫米（mm）、厘米（cm）等为单位的长度值。
• percentage：以父元素宽度的百分比为单位的长度值。
• auto：由浏览器计算出的填充值。

示例

设置统一填充值

div {
  padding: 20px;
}

这样会将 div 元素内部的上、右、下、左四个方向的填充都设置为 20 像素。

设置各方向不同的填充值

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

这样会将 div 元素内部的上、右、下、左四个方向的填充分别设置为：10 像素、20 像素、30 像素、40 像素。

设置百分比填充值

div {
  padding: 5% 10%;
}

这样会将 div 元素内部的上、下填充分别设置为其父元素宽度的 5% 和左、右填充分别设置为其父元素宽度的 10%。

结语

填充属性是 CSS 中常用到的属性之一，它可以改善页面的排版效果。熟练掌握填充属性的使用，在网页布局中可以事半功倍。