CSS padding 內距

CSS padding 用來控制元素的內距，也就是像 DIV 區塊或 span 區域的元素與邊框的距離，以 DIV 區塊來說，預設的情況是邊框會與內部的元素（如文字或圖片）緊密接觸在一起，視覺感受並不是很好，我們可以透過 css 內建的 padding 來修改這樣的情況，讓邊框與文字或圖片呈現較為和諧的樣貌，與 padding 相對應的是 margin 外距。

CSS padding 內距的常用寫法
語法
說明
padding:上距離 右距離 下距離 左距離;
四個方位的內距都不一樣，分開設定。
padding:上方與下方距離 左方與右方距離;
上下兩個方位的內距相同，左右兩的方位的內距相同。
padding:四個方位的距離;
四個方位的內距全部相同，一次設定。
padding:上方距離 左方與右方距離 下方距離;
左右兩邊的內距相同，分別設定上方與下方的內距。

在 W3C 標準的 padding 寫法可分為以上四種，主要目地是提供較為簡單的語法選擇，降低網頁開發時間，原則上所有主流的瀏覽器都支援 padding 的語法，同時也支援以上四種通用寫法，設計師可以根據網頁當時的整體規劃而決定要用哪一種 padding 寫法。

CSS padding 內距範例
<div style="background-color:#DEFFFF;text-align:center;font-size:13px;padding:10px;">
    <div style="background-color:#FFD78C;height:60px;line-height:60px;font-size:13px;">
    padding test box
    </div>
</div>
以上範例輸出
padding test box
範例將一個橘色的 DIV 區塊放在淺綠色的 DIV 區塊內，透過淺綠色的 DIV 區塊設定 padding:10px 的效果，代表淺綠色區塊宣告他的四個方位內距都是 10px，瀏覽器就會自動將橘色區塊與淺綠色區塊的四個邊都騰出 10px 的空間，即成為範例的輸出結果。範例中的幾的其他 css 語法如 background-color 用來設定背景顏色、text-align 用來設定文字對齊、font-size 用來設定文字顏色。

延伸閱讀
© Copyright webtech.tw Since 2010