Padding属性用法和作用

开发 前端
本文向大家介绍一下padding属性的用法和作用,它主要用来设置对象四边的内边距,它又包括四个属性padding-top、padding-right、padding-bottom、padding-left分别作用于上、右、下、左四边。

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

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的设置相同。
 

【编辑推荐】

  1. IE6.0对padding的解读分析
  2. 实例解析CSS padding 属性用法
  3. CSS padding-left属性的定义和使用
  4. CSS教程:详解margin和padding属性应用场合
  5. 实现IE6、IE7、IE8多版本浏览器共存的五种方法

 

 

责任编辑:佚名 来源: gzse7en.com
相关推荐

2010-08-20 15:12:03

marginPadding

2010-08-23 15:33:47

CSSpadding

2010-08-23 08:45:08

CSSpadding内边距

2010-08-25 13:33:55

CSSpadding

2010-08-25 08:57:33

marginpadding

2010-08-23 13:29:43

HTMLpadding

2010-08-24 08:56:22

CSSpadding

2010-08-30 11:34:32

csspadding

2010-08-20 14:58:26

CSSpadding

2010-08-23 15:51:54

paddingmargin

2010-08-19 11:32:10

CSSpaddingmargin

2010-08-19 12:55:55

CSSMarginPadding

2010-08-23 09:01:45

MarginPadding

2010-08-23 13:40:46

CSSpadding-bot

2010-08-23 11:16:25

padding-lef

2010-08-23 09:11:18

padding-bot

2010-08-23 09:16:21

CSSpadding-bot

2010-08-20 16:29:01

padding-lef

2010-08-20 16:19:00

Padding-top

2010-09-08 11:06:49

CSSpaddingmargin
点赞
收藏

51CTO技术栈公众号