信息：盒模型

當(dāng)你的瀏覽器展現(xiàn)一個(gè)元素時(shí)，這個(gè)元素會(huì)占據(jù)一定的空間。這個(gè)空間由四部分組成。

中間是元素呈現(xiàn)內(nèi)容的區(qū)域。這個(gè)區(qū)域的外面是內(nèi)邊距。再外面是邊框。最外面的是外邊距，外邊距將該元素與其它元素分開。

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

顏色

內(nèi)邊距總是跟元素的背景色一樣，所以當(dāng)你設(shè)置背景色時(shí)，你會(huì)發(fā)現(xiàn)背景色在元素本身和內(nèi)邊距上都生效了。外邊距總是透明的。

邊框

你可以用邊線或者邊框來(lái)裝飾元素。

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

樣式包括：

你也可以通過(guò)設(shè)置樣式為 none 或 hidden 來(lái)明確地移除邊框，或者設(shè)置邊框顏色為 transparent 來(lái)讓邊框不可見(jiàn)，后者不會(huì)改變布局。

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

下面的規(guī)則設(shè)置了一個(gè)標(biāo)題元素的背景色和頂部邊框：

結(jié)果如下：

下面的規(guī)則通過(guò)給圖片四周設(shè)置中灰色邊框，使得圖片元素更好辨認(rèn)：

結(jié)果如下：

圖片:

外邊距和內(nèi)邊距

使用外邊距和內(nèi)邊距調(diào)整元素的位置，并在其周圍創(chuàng)建空間。

用 margin 屬性或者 padding 屬性分別設(shè)置外邊距和內(nèi)邊距的寬度。

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

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

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

下面的規(guī)則通過(guò)給元素四周設(shè)置紅色邊框，標(biāo)記出了類名為  remark 的段落元素。

文本周圍的內(nèi)邊距將邊框與文字拉開一點(diǎn)距離。

左外邊距使得段落相對(duì)于其余文本產(chǎn)生縮進(jìn)：

結(jié)果如下：

這是一個(gè)普通的段落。

? 這是一個(gè)標(biāo)記段落。

更多細(xì)節(jié)

當(dāng)你使用外邊距和內(nèi)邊距來(lái)調(diào)整元素的布局時(shí)，你的樣式規(guī)則會(huì)與瀏覽器的默認(rèn)規(guī)則以復(fù)雜的方式相互作用。

不同的瀏覽器布局元素的方式不一樣。直到你的樣式表修改默認(rèn)樣式，結(jié)果可能看起來(lái)相似。有時(shí)這可能讓你的樣式表給出令人驚訝的結(jié)果。

為了達(dá)到理想的效果，你可能需要改變文檔的標(biāo)記。本教程的下一頁(yè)有更多關(guān)于這個(gè)的信息。

欲知更多關(guān)于內(nèi)邊距，外邊距和邊框的細(xì)節(jié)， 請(qǐng)看 盒模型 參考頁(yè)。

實(shí)踐：添加邊框

編輯你的CSS文件，style2.css。添加下面的規(guī)則，給頁(yè)面中每個(gè)標(biāo)題元素上面畫一條線：

如果你做了前一頁(yè)的挑戰(zhàn)題，現(xiàn)在修改你已經(jīng)創(chuàng)建的規(guī)則，或者添加這條新規(guī)則，給每個(gè)列表項(xiàng)的下面增加一定的空間：

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

(A) The oceans

(B) Numbered paragraphs

**1: **Lorem ipsum

**2: **Dolor sit

**3: **Amet consectetuer

**4: **Magna aliquam

**5: **Autem veleum