前一節列表
這是 css getting started 教程的第11節；本節將教你如何使用css來控制乙個可見元素所佔據的空間。在你的示例檔案裡，你將要修改元素佔據的空間並增加裝飾規則。
當你的瀏覽器展現乙個元素時，這個元素會佔據一定的空間。這個空間由四部分組成。
中間是元素呈現內容的區域。這個區域的外面是內邊距。再外面是邊框。最外面的是外邊距，外邊距將該元素與其它元素分開。
外邊距邊框
內邊距元素
淺灰色標出了布局的幾個部分。
元素你在瀏覽器看到的樣子。
內邊距，邊框和外邊距在元素的上、右、下、左都可以有不同的大小。所有這些大小值都可以為0。
內邊距總是跟元素的背景色一樣，所以當你設定背景色時，你會發現背景色在元素本身和內邊距上都生效了。外邊距總是透明的。
外邊距邊框
內邊距元素
元素有綠色的背景。
元素你在瀏覽器看到的樣子。
你可以用邊線或者邊框來裝飾元素。
用border屬性給元素四周指定統一的邊框。在屬性值中指定邊框的寬度（通常是以顯示到螢幕上的畫素為單位）， 樣式， 還有顏色。
樣式包括：
solid
dotted
dashed
double
inset
outset
ridge
groove
你也可以通過設定樣式為none或hidden來明確地移除邊框，或者設定邊框顏色為transparent來讓邊框不可見，後者不會改變布局。
如果一次只指定某乙個方向的邊框，就用屬性：border-top，border-right，border-bottom，border-left。 你可以用這些屬性指定某個方向上的邊框，或者不同方向上的不同邊框。
例子下面的規則設定了乙個標題元素的背景色和頂部邊框：
h3結果如下：
樣式化後的標題
img結果如下：
:使用外邊距和內邊距調整元素的位置，並在其周圍建立空間。
用margin屬性或者padding屬性分別設定外邊距和內邊距的寬度。
如果你指定乙個寬度，它將會作用於元素四周（上、右、下、左）。
如果你指定兩個寬度， 第乙個寬度會作用於頂部和底部，第二個寬度作用於右邊和左邊。
你也可以按照順序指定四個寬度： 上、右、下、左。
例子下面的規則通過給元素四周設定紅色邊框，標記出了類名為remark的段落元素。
文字周圍的內邊距將邊框與文字拉開一點距離。
左外邊距使得段落相對於其餘文字產生縮排：
p.remark結果如下：
這是乙個普通的段落。
這是乙個標記段落。
更多細節
當你使用外邊距和內邊距來調整元素的布局時，你的樣式規則會與瀏覽器的預設規則以複雜的方式相互作用。
不同的瀏覽器布局元素的方式不一樣。直到你的樣式表修改預設樣式，結果可能看起來相似。有時這可能讓你的樣式表給出令人驚訝的結果。
欲知更多關於內邊距，外邊距和邊框的細節， 請看 盒模型
參考頁。
h3如果你做了前一頁的挑戰題，現在修改你已經建立的規則，或者新增這條新規則，給每個列表項的下面增加一定的空間：
li重新整理你的瀏覽器看看效果：
(a) the oceans
(b) numbered paragraphs
1:lorem ipsum
2:dolor sit
3:amet consectetuer
4:magna aliquam
5:autem veleum
挑戰給你的樣式表新增乙個規則，為下面的海洋列表增加 乙個四面環繞且帶有顏色的邊框，來突出海洋——如下圖所示：
(a) the oceans
(b) numbered paragraphs
. . .
（不必完全保證寬度和顏色和這裡的一模一樣。）
看答案。
下一節：
布局
跟我學XSL XSL入門
跟我學xsl xsl入門 上期我們講到用css 層疊樣式表 來格式化xml文件，其效果並不很令人滿意。實際上css用來格式化html標記比較合適些，只是因為它簡單才在上例中採用。xml在更多的時候只是一種資料檔案，怎樣將它變為我們日常所看到的html格式那樣的檔案呢？如果我們將xml檔案比作結構化的...
跟我學XSL（六）
今天我們學習xsl的各種運算子，滿足編寫更大靈活性的xsl樣式的要求。表 一 運算子與特殊字元 運算子描述選擇子元素，返回左側元素的直接子元素 如果 位於最左側表示選擇根結點的直接子元素 遞迴下降，不論深度，搜尋指定的元素 如果位於最左側表示從根結點出發遞迴下降搜尋指定元素 表示當前元素 萬用字元，...
跟我學XSL（三）
經過前幾日的學習，我們學習了xhtml文件的編寫和以及三個xsl元素，已能編寫相當靈活的xsl文件，今天將學習的是xsl模板的編寫。我們都知道，短的文件 程式十分好讀，但當規模增大後，其複雜性也以更快的速度增加。前面我們學了 xsl for each xsl value of 等，可以用它們對xml...