一、基本概念

　　CSS 盒子，規(guī)定了元素框處理元素（內(nèi)容、內(nèi)邊距、邊框和外邊距）的方式。

　　元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距，內(nèi)邊距的邊緣是邊框，邊框以外是外邊距，外邊距是透明的，不會(huì)遮擋元素。

　　內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。元素可以由瀏覽器內(nèi)置樣式表設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。

　　{
　　margin: 0;
　　padding: 0;
　　}

　　在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。

　　二、瀏覽器兼容性

　　根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。但是IE 5 和 6 使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。

　　因此，杭州達(dá)內(nèi)web培訓(xùn)專家建議，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。

　　三、外邊距 margin

　　圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”。

　　1、可選值

　　設(shè)置外邊距的最簡(jiǎn)單的方法就是使用 margin 屬性，該屬性接受任何長(zhǎng)度單位。

　　在 h1 元素的各個(gè)邊上設(shè)置了 1/4 英寸寬的空白

　　h1 {margin : 0.25in;}

　　為 h1 元素的四個(gè)邊分別定義不同的外邊距

　　h1 {margin : 10px 0px 15px 5px;}

　　這些值的順序是從上外邊距 (margin-top) 開始圍著元素順時(shí)針旋轉(zhuǎn)的：

　　margin: top right bottom left

　　等價(jià)于

　　h1 {

　　margin-top: 10px;
　　margin-right: 0px;
　　margin-bottom: 15px;
　　margin-left: 15px;
　　}

　　為 margin 設(shè)置一個(gè)百分比數(shù)值

　　p {margin : 10%;}

　　百分?jǐn)?shù)是相對(duì)于父元素的 width 計(jì)算的。

　　2、值復(fù)制

　　值復(fù)制是指 margin 的四個(gè)方位屬性值部分缺省時(shí)的自動(dòng)填充。

　　四個(gè)值部分缺省，有如下三種情況：

　　1 個(gè)值，其他 3 個(gè)值都由這個(gè)值（上外邊距）復(fù)制得到

　　p {margin: 1px;}    /* 等價(jià)于 1px 1px 1px 1px */

　　2 個(gè)值，第 3 個(gè)值（下外邊距）由第 1 個(gè)值（上外邊距）復(fù)制得到，第 4 個(gè)值（左外邊距）由第 2 個(gè)值（右外邊距）復(fù)制得到

　　h2 {margin: 0.5em 1em;}    /* 等價(jià)于 0.5em 1em 0.5em 1em */

　　3 個(gè)值，第 4 個(gè)值（左外邊距）由第 2 個(gè)值（右外邊距）復(fù)制得到

　　h1 {margin: 0.25em 1em 0.5em;}    /* 等價(jià)于 0.25em 1em 0.5em 1em */

　　總結(jié)一下：上下對(duì)應(yīng)，左右對(duì)應(yīng)，第一個(gè)值是 top.

　　3、值合并

　　外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。

　　合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

　　當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。

　　當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)，它們的上和下外邊距也會(huì)發(fā)生合并。

　　外邊距甚至可以與自身發(fā)生合并，假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或內(nèi)邊距。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并

　　如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：

　　外邊距合并既能夠節(jié)省頁面空間又能使頁面更加美觀。

　　注意：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

　　四、邊框 border

　　元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

　　CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。

　　五、內(nèi)邊距 padding

　　元素的內(nèi)邊距是在邊框和內(nèi)容區(qū)之間。

　　CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域?！　?/p>

　　內(nèi)邊距的使用與外邊距的使用類似。

　　給 h1 元素的各邊添加 10 像素的內(nèi)邊距

　　h1 {padding: 10px;}

　　通常的做法是，按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值

　　h1 {padding: 10px 0.25em 2ex 20%;}

　　同樣可以分別設(shè)置四個(gè)方位

　　h1 {
　　padding-top: 10px;
　　padding-right: 0.25em;
　　padding-bottom: 2ex;
　　padding-left: 20%;
　　}

　　內(nèi)邊距與外邊距一樣，遵循值復(fù)制的規(guī)則。

　　如果缺少左外邊距的值，則使用右外邊距的值。

　　如果缺少下外邊距的值，則使用上外邊距的值。

　　如果缺少右外邊距的值，則使用上外邊距的值。