padding 第二頁

padding-bottom
padding-left
padding-right
padding-top

分別設定元素矩格的上 右 下 左內緣寬度，不可為負值，預設值為 0。可設為：

1. 長度：設定內緣寬度。
2. 百分比：相對於包納矩格的寬度的百分比，作為內緣寬度。
3. inherit：繼承父元素的特徵值。

<div style='width:350px; height:300px; background:#733'> <img style='padding-top:10px; padding-left:10%; padding-right:1000px; padding-bottom:0px; border:solid red 4px; outline:solid white 4px;' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> 外緣<hr /> </div>

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {border:solid 1px red; padding:0px; background:gray; } .hvr:hover {padding:0px 20px;} .hvr:active {padding:0px 80px;} </style> <div> <img class=hvr src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div>

javascript 應用。可以用 style 物件 的特徵 padding, paddingTop, paddingRight, paddingBottom, paddingLeft 讀取或設定特徵值。 <div style='padding:2px 2% 11px' id='pad'> 測試 </div> <script type='text/javascript'> var os=document.getElementById('pad').style; document.write( os.padding +'<br />'+ os.paddingTop +'<br />'+ os.paddingRight +'<br />'+ os.paddingBottom +'<br />'+ os.paddingLeft ); </script>

• 上例中的 padding，在 Firefox 輸出是『2px 2% 11px 2%』；在 IE6, Safari, Chrome 是『2px 2% 11px』。

padding（你正在看 第二頁）

:

第一頁

第二頁