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

CSS DIV 區塊內的文字與 DIV 區塊本身的邊框距離預設值通常是不分開的，換句話說，文字會與 DIV 區塊的邊框黏在一起，在視覺上來說，並不是很美觀，所以我們必須透過一些技巧來調整 DIV 區塊內的文字與邊框的距離，這裡我們使用到的是 CSS 內距調整 padding 屬性，這是 CSS 調整元素內距的標準屬性，使用方式非常簡單，這裡提供幾個範例讓各位讀者參考。

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

<div style="border:2px #ccc solid;padding:5px;">這是內距為 5px 的效果</div>
<div style="border:2px #ccc solid;padding:10px;">這是內距為 10px 的效果</div>
<div style="border:2px #ccc solid;padding:20px;">這是內距為 20px 的效果</div>

範例的效果

這是內距為 5px 的效果

這是內距為 10px 的效果

這是內距為 20px 的效果

由範例的效果可以看出，padding 的參數用得越大，代表 DIV 區塊內的文字與 DIV 區塊本身的邊框距離越大，我們這個範例調整的是區塊內文字與邊框的距離，同樣的概念也可以用在調整區塊內圖片或影片與 DIV 區塊邊框的距離唷！

附帶一提，範例中的 border 是 CSS 用來設計元素邊框的標準屬性，詳細用法請參閱：CSS border 邊框設計。

延伸閱讀