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、示例：

   1. -//W3C//DTD XHTML 1.0 Transitional//EN"  
   2.  
   3.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   4. http://www.w3.org/1999/xhtml"> 
   5.  
   6. 
  
  Content-Type" content="text/html; charset=gb2312" /> 
   7.  
   8.  
  30.  
  31.  
  32.  
  33. 
  
  

   
   left"> 
  34. 这里是内容，对象中的内容到对象边缘的距离是PADDING。  
  35. 宽为270像素，高为175像素。但因为设置了内边距的上为30px，  
  36. 左为40px所以，要想保持原大小宽就必须减去40px，高减去30px。  
  37. 
  
  
 
  38. 
  
  

   
   right">
   
   

    
    sub_right">子对象
   
   
  
  
 
  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的设置相同。