CSS padding 內距屬性與用法範例

woff

透過 CSS padding 內距的設定，可以控制區域如 DIV 或 span 的內部距離，也可以控制 HTML 的表格內部距離（例如文字或圖片與邊框的距離），padding 本身就是內距的設定，padding 是不可以設定負值的唷！這點與 margin 不同。

CSS padding 基本語法範例

padding:上 右 下 左;

　

padding:上下 左右;

　

padding:上 左右 下;

　

padding:四個邊同樣値;

第一個範例我們給了四個値，分別是上內距、右內距、下內距與左內距，每個値必須用半形空白隔開，第二個範例我們只寫了兩個値，分別是上下內距（相同値）與左右內距（相同値）、第三個範例我們給了三個値，分別是上內距、左右內距與下內距，這樣寫的話左右內距會一樣，第四個範例是簡化的寫法，四個邊的內距都一樣。

CSS padding 實際範例

<div style="width:120px;height:120px;background-color:#D4E6F8;padding:15px 20px;">
　<div style="background-color:#FFC991;width:120px;height:120px;"></div>
</div>

這樣的寫法意思是上下內距都是 15px 而左右內距都是 20px，呈現結果如下



範例的重點在於『padding:15px 20px;』這個部分，設定兩個 DIV 區塊的內距，藍色的 DIV 區塊內部有橘色的區塊，透過 padding 設定讓上下內距一樣，左右內距一樣，範例中的 background-color 是背景顏色，width 與 height 則是設定 DIV 區塊的寬度與高度。

CSS padding 的四個邊獨立寫法

• padding-top：上方的內距
• padding-right：右方的內距
• padding-bottom：下方的內距
• padding-left：左方的內距
  

以上四個邊的屬性可以單獨使用，也可以混搭使用。

padding 可能的値

• padding:auto;　//代表讓瀏覽器自己去設定。
• padding:長度單位;　//就是給數字跟單位，單位可以是 em、px、pt 等値。
• padding:%;　//讓瀏覽器自己去設定，跟邊界元素有關。