大部分網頁設計者依賴表格來布局頁面元素，這是因為表格可用于生成邊欄,可以為整個頁面的外觀建立復雜的結構。它也可以做些簡單的事情，如將文字放入有邊框的彩色框中。

假如用表格來實現"文字放入有邊框的彩色框中"非常簡單。但如果需要的只是一個有紅色邊框、黃色背景的段落，如果段落自身有邊框與背景，豈不是容易許多?

其實，css擁有為元素定義邊框的能力。如段落、標題、DIV、定位錨、圖像及各種類型的可加邊框的元素。這些邊框用于將一個元素同其他元素分開。除邊框外，在元素周圍還可以定義區域以控制邊框相對于內容如何放置，以及與其他元素可以有很多近的距離。在元素內容與邊框之間，是補白(padding)；在邊框的四周，是邊界(margin)。

上圖標示了P標簽相對于其父元素DIV的邊距(margin)與補白(padding)，這里有一個細節是很需要注意的，如果想得到預期的效果，需要給元素設置高度和寬度，請看下面示例:

<div>

<p>演示文本</p>

</div>

我們希望的效果是邊距和補白都為1cm，但實際運行效果卻不是這樣。這是因為容器的高度和寬度缺省設置下比較大，我們可以設置一個高、寬值，這個值并不需要精確，而且越小越好：

<div>

<p>演示文本</p>

</div>

上面修改的例子將容器DIV的高、寬值設置為1px,顯然這個值是很小的，但它(容器)卻可以隨著P所設置的邊距值或補白值自動增大以滿足要求。

1.margin值的設定

margin值可采用任何長度度量單位，如px、em、cm等，還可以采用百分比(%)來設置。用百分比設置依賴父元素的高、寬值。對margin和padding使用百分比是使頁面樣式能被多種媒體接受的最好方法。但不是所有的瀏覽器均支持這種行為。

margin:1cm設置了4個方向的邊距都是1cm，若4個方向邊距大小各不相同，可以分開設置，例如margin:1cm,2cm,3cm,4cm。分別對應著上、右、下、左4個方向，設置的順序可以想象成鐘表的順時針方向。

如果以margin來設置時，值并不是4個，那瀏覽器會如何判斷呢？答案并不是省略，而是采取值復制的方式，left復制right，bottom復制top。如果只給出1個值，如margin:1cm，則4個方向都是1cm；給出2個值，如margin:1cm,2cm,則上下為1cm，左右為2cm;給出3個值，如margin:1cm,2cm,3cm,則上為1cm，右為2cm,下為3cm,左為2cm。

如果確實想指定單側邊距的值，就需要用到margin-top、margin-right、margin-bottom、margin-left。

2.壓縮邊界

正確實現的客戶代理會壓縮縱向相鄰邊界，假如有下面的樣式定義:

LI {margin-top:10px;margin-bottom:30px}

則當兩個LI元素相鄰出現時，間距取值較大的，按上面的定義會取30px，而不是10px或兩者之和。

邊界還可以設置為負值，可以產生一些文字重疊的效果：

<p>曹操看到孫權軍容整肅,軍紀嚴明,謂然嘆曰:“生子當如孫仲謀”</p>
<p>先帝創業未半,而中道崩殂;今天下三分,益州疲敝,此誠危急存亡之秋也。</p>

運行以后，剛開始只能看到第一段的內容，可以將瀏覽器慢慢縮下，這時候就能看到第二段內容隨著瀏覽器大小的變化而出現并且改變位置，甚至可以和第一段內容交疊起來。可見邊界的負值是相對于父元素的大小而言的，在這個例子中沒有顯式指定父元素，默認情況下是Body。

3.邊框

元素的邊框(border)就是一條(有時是多條)圍繞著元素內容及補白的線。

每個邊框都有三個特征:寬度、樣式、顏色。邊框寬度的缺省值是medium,medium沒有顯式定義，通常為兩個或三個像素。但我們通常不會看到邊框，原因是其缺省樣式為none,阻止了它們的出現。邊框的默認顏色是元素本身的前景色，如果沒有聲明邊框顏色，那么，它的顏色將與元素的文本顏色相同。另一方面，如果一個元素沒有文本，例如一個只包含圖像的表格，顏色是由繼承得到的，邊框的顏色是其父元素的文本顏色。

CSS定義了9種不同樣式的border-style屬性，包括缺省值none.下面是相同顏色下的各種不同樣式的邊框:

也可以給邊框定義多種樣式。例如:

<style>
p {border-style:solid dashed dotted solid;border-color:red}
</style>

<p>多樣式的邊框</p>

邊框樣式規則的定義規則和上面提到的margin定義規則相同。另外還有需要注意的一點：當部分瀏覽器無法支持一些邊框樣式，它將用solid來替代。

一旦指定了一個樣式，下一步就是給它一定的寬度。這個步驟使用border-width屬性。也可以用border-top-width、border-right-width、border-bottom-width、border-left-width來分開設置。共有四種指定邊框寬度的方法：賦一長度值或使用三個關鍵字:thin、medium(默認值)和thick。這些關鍵字不必與某特定的寬度對應，只是簡單地定義了相互間的關系。它們的寬度關系為:thick>medium>thin。

設定邊框顏色十分容易。只有一個border-color屬性，同樣可以按margin的值復制方式來賦值。如果沒有設置顏色，則缺省顏色為元素的前景色。

如果要單獨設置某一邊的樣式，則可以用border-top、border-right、border-bottom、border-left。例如:p {border-top:thick silver inset;}.實際值的排列順序并不重要。唯一不能缺少的值是邊框樣式，因為它缺省為none。

一般情況下可以用border屬性來設置不太復雜的邊框樣式，例如:H1 {border:thick silver solid;}.使用border的缺點是只能定義全局樣式、寬度及顏色。但可以在后面再單獨定義其一條邊的屬性，則可以覆蓋掉border相同的定義值。例如:h1 {border:thick silver solid; border-left-20px;}.第二條規則將替換掉由第一條規則指定的左側邊框的寬度值。

4.補白

補白位于元素框的邊界與內容區之間。用于影響這個區域的屬性是padding。這個屬性可以接受任何長度值或一個百分比。

元素的背景延伸到補白中，它還延伸到邊框的外部邊界。padding的缺省值是0(zero),且補白的值不能為負值。

同margin一樣，元素的補白也可以設置成百分比，百分比是參考父元素寬度計算的。

可以使用padding-top、padding-right、padding-bottom、padding-left來分開設置單側補白。

5.浮動與清除

CSS允許任何元素浮動，從圖像到段落到列表。在CSS中是由屬性float來完成這些行為的。

<p> 

<img src="http://doc.verycd.com/images/emule.png"> 

eMule 是下載迅速、資源豐富的新一代 P2P 軟件，完全遵從 GPL 協議開發，開放源碼，永久免費。利用他的卓越特性，我們不但可以與全世界的網友共同分享資源，更可以通過 VeryCD，下載和發布最新的資源，充分享受自由共享的樂趣！

</p>

浮動的元素在一些特性上脫離了普通的文檔流，盡管它仍影響著布局。浮動的元素幾乎在它們自己的平面上出現，但仍對文檔的其余部分有重大的影響。

也可以為浮動賦負值，這樣也許會引起浮動元素超過父元素的范圍，但卻是允許的。

6.列表

為改變列表項的計數或項目符號類型，可以使用List-style-type。

list-style-type屬性值及結果：

list-style-type的缺省值是disc，如果沒有特殊的聲明，所有列表(有序與無序)將使用圓盤作為每個項的項目符號。如果想取消項目符號的顯示，可以設置為none。但none并不中斷有序列表的計數。

有時，需要自定義的圖像作為列表項。以前的做法是以效果來仿造，容易造成代碼非常冗長，現在只需要使用list-style-image聲明即可。例如:ul li {list-style-image:url(list.gif);}

有時候會遇到部分瀏覽器不支持自定義圖像，解決這個問題的方法是定義一個備份的list-style-type。例如:ul li {list-style-image:url(logo.gif); list-style-type:square;}

還有一個屬性:list-style-position，它用來設置項目符號相對于列表項內容的位置。有兩個允許值：inside和outside.默認值是outside。

下面是兩種取值后的效果:

為簡潔起見，可以組合三個列表樣式屬性為一個屬性:list-style。允許值為<列表項類型>、<列表項圖像>、<列表項位置>。例如: li {list-style: url(logo.gif) disc outside;}

總結

以上是生活随笔為你收集整理的CSS的边框与补白的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。