盒子模型 Box Model

css 將每個元素都當成是一個盒子的模型，

分別由邊界(margin)、外框(border)、留白(padding)、內容(content)組成，

如下圖：

其中簡潔表示時，相對位置皆為上(top)、右(right)、下(bottom)、左(left)

各元素的細節分別介紹如下：

邊界：與其他元素間的距離

數值可以用負數，

設定方式可用簡潔模式，如margin: 1em 2em 2em 1em;

或者可分別設定，margin-top: 1em;、margin-bottom: 1em; 

比較特別的部分在於，

當兩個元素相鄰時，其左右的距離為左元素的margin-right加上右元素的margin-left

 而兩元素上下的距離則是以較大的為準，

會以上元素的margin-bottom與下元素的margin-top比較，

以數值大的為距離依據。

外框：

數值不可為負數，

可以簡潔方式表示，border-width：2px 1px 3px 2px;

或者是分別以border-top-width、border-right-width表示，

另外除了用數值之外，還可以用 thin、medium、thick 來表示。

留白：

數值不可為負數，

可用簡潔方式表達，padding: 2px 3px 1px 2px;

或是分別用padding-bottom: 2px;、padding-left: 3px;表示

內容：

如果是行內(inline)元素，則直接是資料本身，

若為區塊(block)元素，則可設定width和height調整寬和高度。