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

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

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

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區塊邊框用的屬性，你可以參考《CSSborder邊框》的介紹。

更多DIV設計的技巧CSSDIV文字顏色設計CSSDIV文字字型設計CSSDIV背景圖片CSSDIV背景顏色CSSDIV三欄式網頁排版設計CSSDIV兩欄式網頁排版CSSDIV單欄式網頁排版CSSboxmodel盒子模型 您可能會想看 HTMLdiv標籤 設計HTML圖片與圖片邊框間的距離 HTMLTABLE表格內的文字行高 DIV區塊內的文字行高設計 替HTMLbutton按鈕增加背景圖片 HTMLimgtitle與imgalt的差別 用CSS設計HTML表格欄位內文字靠下對齊 用CSS設計HTML表格欄位內文字靠上對齊 HTMLTablecolspan屬性 HTMLTablerowspan屬性 今日熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 即時熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 ©Copyrightwibibi.com網頁設計教學百科基礎的網頁設計規劃、資料庫與程式設計Since2012