padding属性

返回文章首页

创建时间：一月 3th, 2008 Traffic(451)

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>

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

Posted by: 近水社区

相关文章：

常用CSS属性（Traffic：559 | Posted By：近水社区）

相关模板：

暂无相关模板

上一篇：CSS的margin外边距布局属性下一篇：display与visibility属性

Comments(0)

暂无留言。

padding属性

Comments(0)

话题搜索

文章推荐

留言修改：