3.5 邊距及空格填充

我們都知道可以用HTML設(shè)定邊距，但你必須使用表格，別無它法。而樣式表則......

快速定義邊距

首先，我們應(yīng)該了解樣式表語言的術(shù)語，便我們理解正在談什么。每一個(gè)整塊的素或替代要素都包含在樣式表生成器稱為box的容器之內(nèi)。box包括：

• 要素本身

• 圍繞要素的空格填充（padding）

• 圍繞空格填充的邊框（border）

• 圍繞邊框的邊距（空白－margin）

圖示如下：

你可以分別控制空格填充、邊框和邊距，如我們即將做的。

頂邊距、底邊距、左邊距和右邊距

這4項(xiàng)屬性可以使你控制一個(gè)要素的四周的邊距。如下：

H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }

你可以看到，每一個(gè)邊距都可以有不同的置。或者你可以設(shè)置一個(gè)邊距，然后讓覽器用缺省設(shè)置設(shè)定其它的幾個(gè)邊距。可以將邊距應(yīng)用于文字和替代要素（如象）。

設(shè)定邊距參數(shù)值最明顯的方法是利用長(zhǎng)度位：px(象素）、pt（點(diǎn)數(shù)）等。你也可以用比例值設(shè)定邊距。

以下是幾個(gè)例子：

• 頂邊距

• 底邊距

• 左邊距和右邊距

將邊距值設(shè)為負(fù)值，你就可以將兩個(gè)要素疊在一起，例：

Books

are mind food

上例中， "are mind food" 的底邊距為－55象素，右邊距為60象素。

使用負(fù)值使要素重疊的的缺陷是不同的瀏器對(duì)其處理方式不同。比如，在顯示上例子時(shí)，不同的4種主要瀏覽器（Communicator for PC, Communicator for Mac, IE for PC, IE for Mac）對(duì)文字重疊的程度不同。

另一個(gè)缺陷是你不能完全控制位于底部的內(nèi)容，而且不同的瀏覽器對(duì)其顯示也不同。例如， Communicator總是將圖象顯示在文字的上部。 IE似乎是將個(gè)要素按照其載入瀏覽器窗口的順序顯示各要素。

換句話說，如果你打算將幾個(gè)要素疊放在一起，就不要對(duì)邊距使用負(fù)值。今天的教程將教你如何疊放個(gè)要素。

瀏覽器對(duì)該屬性的支持方面還應(yīng)注意以下幾點(diǎn)：

• 當(dāng)你在IE 3中使用標(biāo)尺單位(如英寸和厘米）時(shí)，IE 3有時(shí)會(huì)加大底邊距。同樣，有些HTML標(biāo)簽可以適用
  底邊距，有些則不能，

• IE 4有時(shí)在對(duì)替代要素（如圖象）設(shè)定左邊距時(shí)會(huì)出現(xiàn)問題，你可以將圖象包在一個(gè)<DIV>中，然后給<DIV>設(shè)定樣式。

頂空格填充，底空格填充，左空格填充和
右空格填充

空格填充的作用類似于邊距控制，你可以設(shè)定一個(gè)要素的前后左右的空格填充的尺寸。

H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }

你可以使用任何一種長(zhǎng)度單位或比例值設(shè)定空格填充。其使用方法同邊距的屬性。

但是空格填充不能使用負(fù)值（而且，IE 3不支持空格填充屬性）。

下面我們將探討位于邊距和空格填充之間的邊框。