一、基本概念
CSS 盒子，規定了元素框處理元素（內容、內邊距、邊框和外邊距）的方式。
元素框的最內部分是實際的內容，直接包圍內容的是內邊距，內邊距的邊緣是邊框，邊框以外是外邊距，外邊距是透明的，不會遮擋元素。
內邊距、邊框和外邊距都是可選的，默認值是零。元素可以由瀏覽器內置樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。
{
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
二、瀏覽器兼容性
根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。但是IE 5 和 6 使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
因此，杭州達內web培訓專家建議，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
三、外邊距 margin
圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。
1、可選值
設置外邊距的最簡單的方法就是使用 margin 屬性，該屬性接受任何長度單位。
在 h1 元素的各個邊上設置了 1/4 英寸寬的空白
h1 {margin : 0.25in;}
為 h1 元素的四個邊分別定義不同的外邊距
h1 {margin : 10px 0px 15px 5px;}
這些值的順序是從上外邊距 (margin-top) 開始圍著元素順時針旋轉的：
margin: top right bottom left
等價于
h1 {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 15px;
}
為 margin 設置一個百分比數值
p {margin : 10%;}
百分數是相對于父元素的 width 計算的。
2、值復制
值復制是指 margin 的四個方位屬性值部分缺省時的自動填充。
四個值部分缺省，有如下三種情況：
1 個值，其他 3 個值都由這個值（上外邊距）復制得到
p {margin: 1px;} /* 等價于 1px 1px 1px 1px */
2 個值，第 3 個值（下外邊距）由第 1 個值（上外邊距）復制得到，第 4 個值（左外邊距）由第 2 個值（右外邊距）復制得到
h2 {margin: 0.5em 1em;} /* 等價于 0.5em 1em 0.5em 1em */
3 個值，第 4 個值（左外邊距）由第 2 個值（右外邊距）復制得到
h1 {margin: 0.25em 1em 0.5em;} /* 等價于 0.25em 1em 0.5em 1em */
總結一下：上下對應，左右對應，第一個值是 top.
3、值合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。
當一個元素包含在另一個元素中時，它們的上和下外邊距也會發生合并。
外邊距甚至可以與自身發生合并，假設有一個空元素，它有外邊距，但是沒有邊框或內邊距。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并
如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：
外邊距合并既能夠節省頁面空間又能使頁面更加美觀。
注意：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
四、邊框 border
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
五、內邊距 padding
元素的內邊距是在邊框和內容區之間。
CSS padding 屬性定義元素邊框與元素內容之間的空白區域。
內邊距的使用與外邊距的使用類似。
給 h1 元素的各邊添加 10 像素的內邊距
h1 {padding: 10px;}
通常的做法是，按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值
h1 {padding: 10px 0.25em 2ex 20%;}
同樣可以分別設置四個方位
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
內邊距與外邊距一樣，遵循值復制的規則。
如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。
