css中的padding属性怎么用

css中的padding属性怎么用？本节学习内边距(padding)与元素大小的关系，还会探索元素中的内容(content)、元素的背景(background)、背景图片(background-image)与内边距(padding)的位置关系。经过学习，读者将掌握padding的各种复合写法。

1、padding会撑大元素的大小

【例】创建一个div元素，长度和宽度均为200px，内边距为100px，浏览器显示效果如图1所示。CSS代码如下。

 .box{
   width:100px;
   height:100px;
   font-size:18px;
   padding:30px;
   color:#ffffff;
   background-color:#b6d16a;
 }

图1 浏览器显示效果

HTML代码如下。

<div class="box box1"> 元素的盒模型学习——内边距padding </div>

在浏览器的开发者模式下查看这个元素的盒模型，如图2所示，可以看到content区域的宽度和高度等于width和height的值，文字内容显示在content区域内。元素的padding将元素的内容与边框隔开，元素的背景颜色默认填充在content和padding两个区域。

此时，浏览器中绿色方块的宽度和高度数值如下所示。

绿色方块的宽度为：元素的width(100px)+ padding-left(100px)+padding-right(100px)= 260px。

绿色方块的高度为：元素的height(100px)+ padding-top(100px)+padding-bottom(100px)= 260px。

图2 在开发者模式下查看盒模型

给元素添加背景图片，背景图片将默认填充padding的空间，浏览器显示效果如图3所示，CSS代码如下。

background-image:url(img/sky1.jpg);

图3 给元素添加背景图片

与border类似，也可以分别设置padding不同方向的值，浏览器显示效果如图4所示，CSS代码如下。

padding-top:50px;
padding-right:100px;
padding-bottom:150px;
padding-left:200px;

图4 分别设置padding不同方向的值

2、padding的复合写法

所谓padding的复合写法，就是把padding-top、padding-right、padding-bottom、paddingleft合并为一条CSS样式。padding属性可以有1～4个属性值。

(1)设置1个属性值时，代表4个方向的padding值。CSS代码如下，运行结果如图5所示。

.box{
   width:100px;
   height:100px;
   padding:100px;
   background-color:#b6d16a;
}

图5 设置1个属性值

(2)设置2个属性值时，第1个属性值设定padding-top、padding-bottom，第2个属性值设定padding-right、paddingleft。CSS代码如下，运行结果如图6所示。

padding: 100px 50px;

图6 设置2个属性值

(3)设置3个属性值时，第1个属性值设定padding-top，第2个属性值设定padding-right和padding-left，第3个属性值设定padding-bottom。因为padding的属性值沿顺时针方向分配，顺序为padding-top、padding-right、padding-bottom、padding-left，当有3个属性值时，排在第4位的padding-left没有对应的属性值，所以取对面padding-right的属性值为自己的值。CSS代码如下，运行结果如图7所示。

padding:10px 100px 200px;

图7 设置3个属性值

(4)设置4个属性值时，第1个属性值为padding-top，第2个属性值为padding-right，第3个属性值为padding-bottom，第4个属性值为padding-left。CSS代码如下，运行结果如图8所示。

padding: 100px 50px 30px 10px;

图8 设置4个属性值

内边距复合写法的顺序是从padding-top开始，顺时针方向设置，到padding-left结束。当复合写法中的值不足4个时，其他值采用上下对称、左右对称的方式补全。