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

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

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

DIV區塊內文字與邊框的距離調整實際範例 這是DIV區塊內的文字，padding設為0px。

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

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

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

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

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

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