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

文章推薦指數: 80 %
投票人數:10人

CSS DIV 區塊內的文字與DIV 區塊本身的邊框距離預設值通常是不分開的,換句話說,文字會與DIV 區塊的邊框黏在一起,在視覺上來說,並不是很美觀,所以我們必須透過一些 ... WEBTECH網頁設計教學站 首頁 PHP CSS HTML JavaScript GIMP Linux OpenOffice 瀏覽器 其它 Home › CSS › 調整CSSDIV區塊內的文字與邊框的距離 調整CSSDIV區塊內的文字與邊框的距離 CSSDIV區塊內的文字與DIV區塊本身的邊框距離預設值通常是不分開的,換句話說,文字會與DIV區塊的邊框黏在一起,在視覺上來說,並不是很美觀,所以我們必須透過一些技巧來調整DIV區塊內的文字與邊框的距離,這裡我們使用到的是CSS內距調整padding屬性,這是CSS調整元素內距的標準屬性,使用方式非常簡單,這裡提供幾個範例讓各位讀者參考。

調整CSSDIV區塊內的文字與邊框的距離範例這是內距為5px的效果這是內距為10px的效果這是內距為20px的效果範例的效果這是內距為5px的效果這是內距為10px的效果這是內距為20px的效果由範例的效果可以看出,padding的參數用得越大,代表DIV區塊內的文字與DIV區塊本身的邊框距離越大,我們這個範例調整的是區塊內文字與邊框的距離,同樣的概念也可以用在調整區塊內圖片或影片與DIV區塊邊框的距離唷!附帶一提,範例中的border是CSS用來設計元素邊框的標準屬性,詳細用法請參閱:CSSborder邊框設計。

延伸閱讀調整DIV區塊內的文字行高CSSDIV邊框顏色與邊框樣式設計CSSpadding內距CSSmargin邊界使用介紹範例教學 您可能會想看 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 CSSdisplay:inline-block可設定區塊寬度與高度 利用CSS設計ulli橫向水平顯示 CSSlist-style-type列表開頭顯示符號 CSSlist-style-image列表開頭顯示圖示 CSSlist-style-position列表位置 CSSlist-style列表設計 修改CSSDIV內文字字型 即時熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 今日熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 ©Copyrightwebtech.twSince2010



請為這篇文章評分?