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、示例：
- <!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的設置相同。
【編輯推薦】
- IE6.0對padding的解讀分析
- 實例解析CSS padding 屬性用法
- CSS padding-left屬性的定義和使用
- CSS教程：詳解margin和padding屬性應用場合
- 實現IE6、IE7、IE8多版本瀏覽器共存的五種方法
