DIV 區塊內文字與邊框的距離調整

如果你喜歡用 DIV 區塊來做網頁排版，那麼總是會有一些 DIV 區塊是用來放文字內容，預設的 DIV 區塊文字內容與邊框的距離通常會黏在一起，造成視覺上的不舒適，網頁設計師通常會利用 CSS 的 padding 屬性來調整 DIV 區塊內文字與邊框間的距離，也就是俗稱的內距，透過內距的調整，讓我們網頁中的文字與 DIV 區塊邊框可以拉出一個間隙，看起來更舒適，我們先來看看這個 CSS 的 padding 屬性基本語法，再套用到範例中看實際的效果。

CSS padding 屬性語法

padding: 內距;

padding 的內距參數可以使用＂數字+單位＂的方式來表示，也可以用百分比來表示，甚至還可以根據四個不同的邊來設計我們要的內距，功能還算簡單強大，請參閱《CSS padding 內距屬性與用法範例》有更詳細的用法介紹。

DIV 區塊內文字與邊框的距離調整實際範例

<div style="border:1px blue solid;padding:0px;">
這是 DIV 區塊內的文字，padding 設為 0px。
</div>
<div style="border:1px blue solid;padding:10px;">
這是 DIV 區塊內的文字，padding 設為 10px。
</div>
<div style="border:1px blue solid;padding:20px;">
這是 DIV 區塊內的文字，padding 設為 20px。
</div>

範例的效果

這是 DIV 區塊內的文字，padding 設為 0px。

這是 DIV 區塊內的文字，padding 設為 10px。

這是 DIV 區塊內的文字，padding 設為 20px。

為了能夠更清楚的表示出 padding 所創造出來的內距效果，我們準備了三個不同的 DIV 區塊，分別將內距設定為 0px, 10px 以及 20px，各位可以很清楚的看到三個藍色邊框的 DIV 區塊內文字與 DIV 區塊邊框間產生了距離，padding 設得越大，文字與邊框的距離就越大，這就是 padding 屬性的基本效果，另外，範例中的 border 是用來設計 DIV 區塊邊框用的屬性，你可以參考《CSS border 邊框》的介紹。

更多 DIV 設計的技巧