Padding属性用法和作用-padding属性

你对padding属性的用法和作用是否了解，这里和大家分享一下，padding属性又包括四个属性padding-top、padding-right、padding-bottom、padding-left分别作用于上、右、下、左四边。

padding属性

1、语法：padding:lenght

2、参数：

（1）lenght：由浮点数字和单位标识符组成的长度值或者百分数。百分数是基于父对象的宽度。请参阅长度单位

3、说明：

设置对象四边的内边距。默认值是0。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将作用于全部的四边。

如果提供两个，第一个作用于上、下，第二个作用于左、右。

如果提供三个，第一个作用于上，第二个作用于左、右，第三个作用于下。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。不允许负值。

内边距留白处总是透明的，并且设置内边距会直接影响对象的大小。

对应的脚本特性为：padding。

4、示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
#left {  
  float:left;  
  margin:0 5px 0 0;  
  width:230px;  
  height:145px;  
  padding:30px 0 0 40px;  
  border:1px #000 solid;  
}  
#right {  
  float:left;  
  margin:0 0 0 5px;  
  width:118px;  
  height:118px;  
  padding:10px 0 0 10px;  
  border:1px #000 solid;  
}  
 #sub_right {  
   float:left;  
   border:1px #000 solid;  
 }  
</style> 
</head> 
 
<body> 
<div id="left"> 
这里是内容，对象中的内容到对象边缘的距离是PADDING。  
宽为270像素，高为175像素。但因为设置了内边距的上为30px，  
左为40px所以，要想保持原大小宽就必须减去40px，高减去30px。  
</div> 
<div id="right"><div id="sub_right">子对象</div></div> 
</body> 
</html> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

5、提示

（1）由实例可以看出，设置了padding属性就相当于增加了对象的大小。原宽270px，高175px，设置padding:30px 0 0 40px后对象的大小应该是宽为310px，高为205px，要想保持原大小就必须减去相应的宽高。所以，例子中对象的宽是270-40=230px，高是175-30=145px。

（2）#right设置了padding:10px 0 0 10px，但其内联对象#sub_right的内边距并没有发生变化，所以padding也是不具有继承性的。

padding属性是可以分别设置的。

padding-top、padding-right、padding-bottom、padding-left分别作用于上、右、下、左四边。语法和参数和padding的设置相同。

【编辑推荐】