外邊距就是圍繞在內(nèi)容框的區(qū)域,可以參考上面的結(jié)構(gòu)圖.默認(rèn)為透明的區(qū)域.同樣,外邊距也接受任何長度的單位,百分?jǐn)?shù).與內(nèi)邊據(jù)很相似 我們可以使用下列任何一個(gè)屬性來只設(shè)置相應(yīng)上的外邊距，而不會(huì)直接影響所有其他外邊距： margin-top margin-right margin-bottom margin-left 是不是很眼熟,這些屬性都是這么相通,大家可以發(fā)散的聯(lián)系

margin 的默認(rèn)值是 0，所以如果沒有為 margin 聲明一個(gè)值，就不會(huì)出現(xiàn)外邊距。但是，在實(shí)際中，瀏覽器對(duì)許多元素已經(jīng)提供了預(yù)定的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會(huì)在每個(gè)段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會(huì)自己應(yīng)用一個(gè)外邊距。當(dāng)然，只要你特別作了聲明，就會(huì)覆蓋默認(rèn)樣式。

這里講一講的具體賦值:

值復(fù)制 還記得嗎？我們曾經(jīng)在前兩節(jié)中提到過值復(fù)制。下面我們?yōu)槟v解如何使用值復(fù)制。 有時(shí)，我們會(huì)輸入一些重復(fù)的值：

p {margin: 0.5em 1em 0.5em 1em;}

通過值復(fù)制，您可以不必重復(fù)地鍵入這對(duì)數(shù)字。上面的規(guī)則與下面的規(guī)則是等價(jià)的：

p {margin: 0.5em 1em;}

這兩個(gè)值可以取代前面 4 個(gè)值。這是如何做到的呢？CSS 定義了一些規(guī)則，允許為外邊距指定少于 4 個(gè)值。規(guī)則如下：

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

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

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

反正就是對(duì)稱復(fù)制

下面我們來舉例說明:

h1 {margin: 0.25em 1em 0.5em;}?

/* 等價(jià)于 0.25em 1em 0.5em 1em */

h2 {margin: 0.5em 1em;}

/* 等價(jià)于 0.5em 1em 0.5em 1em */

p {margin: 1px;}???????

/* 等價(jià)于 1px 1px 1px 1px */

這里來一個(gè)簡單的示例: html 文件內(nèi)容如下:

<div class="wb">
    <div class="bk">
        <div class="nj">
            <div class="zw">
                php中文網(wǎng)
            </div>
        </div>
    </div>
</div>

CSS 文件內(nèi)容如下:

.wb{
    margin: 100px;
}
.bk{
    border-style: groove;
 
}
.nj{
    padding: 10px;
 
}
.zw{
    background-color: cornflowerblue;
 
}

效果圖如下:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

這里還有個(gè)知識(shí)點(diǎn),就是這是外邊距的合并,外邊框合并就是一個(gè)疊加的概念,下面我們用一張圖來說明合并之前與合并之后的差別:

當(dāng)我們將 HTML 文件中的 div 復(fù)制一遍之后我們會(huì)發(fā)現(xiàn),效果是這樣的:

按理這兩個(gè)模塊時(shí)間的間距是 200px,但是這里卻是 100px,這就說明,默認(rèn)的狀態(tài)是合并的狀態(tài).