信息：盒模型

當你的瀏覽器展現一個元素時，這個元素會占據一定的空間。這個空間由四部分組成。

中間是元素呈現內容的區域。這個區域的外面是內邊距。再外面是邊框。最外面的是外邊距，外邊距將該元素與其它元素分開。

內邊距，邊框和外邊距在元素的上、右、下、左都可以有不同的大小。所有這些大小值都可以為0。

顏色

內邊距總是跟元素的背景色一樣，所以當你設置背景色時，你會發現背景色在元素本身和內邊距上都生效了。外邊距總是透明的。

邊框

你可以用邊線或者邊框來裝飾元素。

用 border 屬性給元素四周指定統一的邊框。在屬性值中指定邊框的寬度（通常是以顯示到屏幕上的像素為單位）， 樣式， 還有顏色。

樣式包括：

你也可以通過設置樣式為 none 或 hidden 來明確地移除邊框，或者設置邊框顏色為 transparent 來讓邊框不可見，后者不會改變布局。

如果一次只指定某一個方向的邊框，就用屬性： border-top， border-right， border-bottom， border-left。 你可以用這些屬性指定某個方向上的邊框，或者不同方向上的不同邊框。

下面的規則設置了一個標題元素的背景色和頂部邊框：

結果如下：

下面的規則通過給圖片四周設置中灰色邊框，使得圖片元素更好辨認：

結果如下：

圖片:

外邊距和內邊距

使用外邊距和內邊距調整元素的位置，并在其周圍創建空間。

用 margin 屬性或者 padding 屬性分別設置外邊距和內邊距的寬度。

如果你指定一個寬度，它將會作用于元素四周（上、右、下、左）。

如果你指定兩個寬度， 第一個寬度會作用于頂部和底部，第二個寬度作用于右邊和左邊。

你也可以按照順序指定四個寬度： 上、右、下、左。

下面的規則通過給元素四周設置紅色邊框，標記出了類名為  remark 的段落元素。

文本周圍的內邊距將邊框與文字拉開一點距離。

左外邊距使得段落相對于其余文本產生縮進：

結果如下：

這是一個普通的段落。

? 這是一個標記段落。

更多細節

當你使用外邊距和內邊距來調整元素的布局時，你的樣式規則會與瀏覽器的默認規則以復雜的方式相互作用。

不同的瀏覽器布局元素的方式不一樣。直到你的樣式表修改默認樣式，結果可能看起來相似。有時這可能讓你的樣式表給出令人驚訝的結果。

為了達到理想的效果，你可能需要改變文檔的標記。本教程的下一頁有更多關于這個的信息。

欲知更多關于內邊距，外邊距和邊框的細節， 請看 盒模型 參考頁。

實踐：添加邊框

編輯你的CSS文件，style2.css。添加下面的規則，給頁面中每個標題元素上面畫一條線：

如果你做了前一頁的挑戰題，現在修改你已經創建的規則，或者添加這條新規則，給每個列表項的下面增加一定的空間：

刷新你的瀏覽器看看效果：

(A) The oceans

(B) Numbered paragraphs

**1: **Lorem ipsum

**2: **Dolor sit

**3: **Amet consectetuer

**4: **Magna aliquam

**5: **Autem veleum