css属性padding简要
1、padding
语法:
padding : length
取值:
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。请参阅 长度单位
说明:
检索或设置对象四边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边(从top开始顺时针旋转)。如果只提供一个,将用于全部的四条边。如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 padding 。
示例:
body { padding: 36pt 24pt 36pt; }
body { padding: 11.5%; }
body { padding: 10% 10% 10% 10%; }
2、padding-Top
语法:
padding-top : length
取值:
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。请参阅 长度单位
说明:
检索或设置对象上边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 paddingTop 。
示例:body { padding: 36pt 24pt 36pt; }
body { padding-top: 11.5%; }
body { padding: 10% 10% 10% 10%; }
3、padding-right
语法:
padding-right : length
取值:
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。请参阅 长度单位
说明:
检索或设置对象右边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 paddingRight 。
示例:body { padding: 36pt 24pt 36pt; }
body { padding-right: 11.5%; }
body { padding: 10% 10% 10% 10%; }
4、padding-Bottom
语法:
padding-bottom : length
取值:
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。请参阅 长度单位
说明:
检索或设置对象底边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 paddingBottom 。
示例:body { padding: 36pt 24pt 36pt; }
body { padding-bottom: 11.5%; }
body { padding: 10% 10% 10% 10%; }
5、padding-left
语法:
padding-left : length
取值:
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。请参阅 长度单位
说明:
检索或设置对象左边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
在IE5.5+中此属性支持内联对象使用。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 paddingLeft 。
示例:body { padding: 36pt 24pt 36pt; }
body { padding-left: 11.5%; }
body { padding: 10% 10% 10% 10%; }
padding和margin有什么区别呢?
边界margin和补白padding(依据国内出版社的翻译惯例,margin被翻译成边界,padding被翻译成补白,译者依照习惯翻译。但译者认为,margin翻译成外边距,padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注)是隔开元素最常用的两个属性。边界是元素外边的距离,而补白则是元素内部的距离。
脚本特性
obj.style.padding
obj.style.paddingLeft
obj.style.paddingTop
<style>
#idParentDiv{width:100%;padding:6px;background-color:buttonshadow;}
#idDiv{width:400px;height:80px;background-color:#FFD700;padding:6px;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;padding:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<script>
var iValue=6;
function rdl_doAdd(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
var oNum=document.all("idNum");
iValue+=1;
oNum.value=oDiv.style.paddingLeft=iValue.toString()+"px";
oCodeDiv.innerText="padding-left : "+oNum.value+" ; ";
}
function rdl_doDvv(e){
var oCodeDiv=document.all("idCodeDiv");
var oDiv=document.all("idDiv");
var oNum=document.all("idNum");
iValue-=1;
oNum.value=oDiv.style.paddingLeft=iValue.toString()+"px";
oCodeDiv.innerText="padding-left : "+oNum.value+" ; ";
}
</script>
<div id=idParentDiv>
<div id=idDiv><img src="images/rdl_body0.jpg" style="float:left;border:1px solid #000000;">请从下方选属性的值。</div>
</div>
<br>
<table><tr><td>
<input id=idNum type=text value="6px" size=19 readonly>
</td><td>
<input type=button onclick="rdl_doAdd();" value=" + " id=idBtn1>
</td><td>
<input type=button onclick="rdl_doDvv();" value=" - " id=idBtn2>
</td></tr></table>
<div id=idCodeDiv>padding-left : 6px ; </div>
相关文章
