Padding屬性用法和作用
你對(duì)padding屬性的用法和作用是否了解，這里和大家分享一下，padding屬性又包括四個(gè)屬性padding-top、padding-right、padding-bottom、padding-left分別作用于上、右、下、左四邊。
padding屬性
1、語法：padding:lenght
2、參數(shù)：
（1）lenght：由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值或者百分?jǐn)?shù)。百分?jǐn)?shù)是基于父對(duì)象的寬度。請(qǐng)參閱長度單位
3、說明：
設(shè)置對(duì)象四邊的內(nèi)邊距。默認(rèn)值是0。
如果提供全部四個(gè)參數(shù)值，將按上、右、下、左的順序作用于四邊。
如果只提供一個(gè)，將作用于全部的四邊。
如果提供兩個(gè)，第一個(gè)作用于上、下，第二個(gè)作用于左、右。
如果提供三個(gè)，第一個(gè)作用于上，第二個(gè)作用于左、右，第三個(gè)作用于下。
內(nèi)聯(lián)對(duì)象要使用該屬性，必須先設(shè)定對(duì)象的height或width屬性，或者設(shè)定position屬性為absolute。不允許負(fù)值。
內(nèi)邊距留白處總是透明的，并且設(shè)置內(nèi)邊距會(huì)直接影響對(duì)象的大小。
對(duì)應(yīng)的腳本特性為：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>無標(biāo)題文檔</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">
- 這里是內(nèi)容，對(duì)象中的內(nèi)容到對(duì)象邊緣的距離是PADDING。
- 寬為270像素，高為175像素。但因?yàn)樵O(shè)置了內(nèi)邊距的上為30px，
- 左為40px所以，要想保持原大小寬就必須減去40px，高減去30px。
- </div>
- <div id="right"><div id="sub_right">子對(duì)象</div></div>
- </body>
- </html>
5、提示
（1）由實(shí)例可以看出，設(shè)置了padding屬性就相當(dāng)于增加了對(duì)象的大小。原寬270px，高175px，設(shè)置padding:30px 0 0 40px后對(duì)象的大小應(yīng)該是寬為310px，高為205px，要想保持原大小就必須減去相應(yīng)的寬高。所以，例子中對(duì)象的寬是270-40=230px，高是175-30=145px。
（2）#right設(shè)置了padding:10px 0 0 10px，但其內(nèi)聯(lián)對(duì)象#sub_right的內(nèi)邊距并沒有發(fā)生變化，所以padding也是不具有繼承性的。
padding屬性是可以分別設(shè)置的。
padding-top、padding-right、padding-bottom、padding-left分別作用于上、右、下、左四邊。語法和參數(shù)和padding的設(shè)置相同。
【編輯推薦】
- IE6.0對(duì)padding的解讀分析
- 實(shí)例解析CSS padding 屬性用法
- CSS padding-left屬性的定義和使用
- CSS教程：詳解margin和padding屬性應(yīng)用場(chǎng)合
- 實(shí)現(xiàn)IE6、IE7、IE8多版本瀏覽器共存的五種方法
