CSS 學習筆記 > css padding 內距

css padding 內距顧名思義就是元素內部與邊框（border）的距離，是 css 設計時，使用頻率非常高的一種技巧，在多數的時候，光是使用 DIV 區塊將文字或圖片等網頁元素包起來是不夠的，因為少了 padding 修飾內部元素與邊框間的距離，往往看起來不是很專業，好的設計需要有好的細部處理，padding 就是這種細部處理非常重要的屬性。

css padding 內距語法規則css padding 的語法很簡單，就是 padding 加上半形冒號（:）即可接上需要的距離，最後再加上半形分號（;）結束，這裡的距離通常使用 px、em、cm ...等單位，不過比較建議使用 px 這個常用單位，例如 padding:5px; 就代表 DIV 區塊內的元素與邊框距離是 5px。

範例、用 css padding 調整 DIV 區塊內文字與邊框的內距呈現效果範例有兩個 DIV 區塊，只有第二個有使用 padding:5px; 設定內距，可以看到兩個 DIV 區塊所呈現的效果完全不同，如果整個網頁中有許多的 DIV 區塊都沒有使用 padding 修飾，很可能會出現混亂或不專業的效果，所以善用 css padding 屬性是 css 設計師非常基本的入門功夫。

我們的範例只寫到使用一個距離，但其實 padding 可以一次設定四個不同方向的內距，也可以分別設定上下內距以及左右內距，差別在於參數值的位置，舉個例子。

例一：『padding: 10px 5px 8px 20px;』代表上距 10px、右距 5px、下距 8px、左距 20px。
例二：『padding: 10px 5px』這樣代表上下內距都是 10px、左右內距都是 5px。

padding 與 margin 的差別

既然有內距，當然就會有外距，在 css 的世界裡，外距是用 margin 來設定，我們這篇所提到的 padding 是設定 DIV 區塊內部元素與 DIV 區塊邊框的距離，而 margin 就是用來設定 DIV 區塊與 DIV 區塊彼此間的距離，請參閱這一篇：css margin 外距。

延伸閱讀

• CSS 的 margin 與 padding 有什麼差別

累積熱門文章

• 如何用 css style 替文字增加刪除線
• 用 DIV 排版兩欄式網頁設計
• 用 DIV 排版三欄式網頁設計
• CSS text-align 水平對齊設計
• css color 文字顏色
• 用 DIV 排版單欄式網頁設計
• CSS 的註解寫法規則
• CSS DIV 區塊
• CSS DIV 區塊內的文字或圖片置中
• CSS z-index 垂直螢幕方向位置 (z軸高度)

今日熱門文章

• 如何用 css style 替文字增加刪除線
• CSS span 區域
• 用 DIV 排版兩欄式網頁設計
• 用 CSS 的 font-family 屬性修改網頁表格文字的字型
• 用 DIV 排版三欄式網頁設計
• CSS DIV 區塊內的文字或圖片置中
• 用 CSS 的 font-family 屬性修改 DIV 區塊的文字字型
• CSS line-height 網頁文字行高設計
• 用 DIV 排版單欄式網頁設計
• css margin 外距

CSS 是目前非常熱門的網頁設計語言，幾乎所有主流的瀏覽器都支援 CSS 語法，比起傳統的網頁設計方式，CSS 能夠提供設計師更多的優勢以設計出更獨具風格的網頁，也讓網站維護更加有效率，CSS 讓網頁設計更進化了。