高端網(wǎng)站建設(shè)服務(wù)商seo外包費用
元素的外邊距（margin）是圍繞在元素邊框以外（不包括邊框）的空白區(qū)域，這片區(qū)域不受 background 屬性的影響，始終是透明的。
為元素設(shè)置外邊距
默認情況下如果不設(shè)置外邊距屬性，HTML 元素就是不會有外邊距，但也有例外的情況，因為瀏覽器會為一些 HTML
元素設(shè)置默認的外邊距，例如<p>元素。您可以使用下面的屬性來為 HTML 元素設(shè)置外邊距：
- margin-top：設(shè)置元素上方的外邊距；
- margin-bottom：設(shè)置元素下方的外邊距；
- margin-right：設(shè)置元素右側(cè)的外邊距；
- margin-left：設(shè)置元素左側(cè)的外邊距；
- margin：外邊距的簡寫屬性，可以同時設(shè)置元素四個方向（上下左右）的外邊距。
上述外邊距屬性的可選值如下表所示：
| 值 | 描述 |
|---|---|
| auto | 由瀏覽器計算外邊距的尺寸 |
| length | 使用具體數(shù)值配合 px、cm 等單位來定義元素外邊距的尺寸，可以為負值，默認值為 0px |
| % | 定義基于父元素的寬度百分比的外邊距，可以為負值 |
| inherit | 從父元素繼承外邊距屬性的值 |
【示例】使用 margin-top、margin-bottom、margin-right、margin-left 幾個屬性分別設(shè)置元素四個方向上的外邊距：
<!DOCTYPE html><html><head><style>div.box-one {border: 1px solid red;display:inline-block; /*將元素轉(zhuǎn)換為行內(nèi)元素*/}div.box-two {/*為了能更直觀的看出效果，這里為元素設(shè)置上邊框和背景色*/border: 1px solid black;background: #CFF;width: 200px;height: 80px;margin-top: 10px;margin-right: 1em;margin-left: 1cm;}div.box-three {/*為了能更直觀的看出效果，這里為元素設(shè)置上邊框和背景色*/border: 1px solid #CCC;background: #CCC;width: 180px;height: 100px;margin-top: 10px;margin-bottom: 1em;margin-right: 10px;margin-left: 1cm;}</style></head><body><div class="box-one"><div class="box-two">margin-top: 10px;<br>margin-right: 1em;<br>margin-left: 1cm;</div><div class="box-three">margin-top: 10px;<br>margin-bottom: 1em;<br>margin-right: 10px;<br>margin-left: 1cm;</div></div></body></html>
運行結(jié)果如下圖所示：
圖：margin-top、margin-bottom、margin-right、margin-left 屬性演示
這里需要特別說明一下 margin 屬性，與其它幾個屬性不同，margin 屬性可以接受 1~4 個參數(shù)（參數(shù)之間使用空格分隔）：
- 如果提供四個參數(shù)，那么將按照上、右、下、左的順序分別作用于元素四個方向的外邊距；
- 如果提供三個參數(shù)，那么第一個參數(shù)會作用在元素上方的外邊距，第二個參數(shù)會作用在元素左右兩側(cè)的外邊距，第三個參數(shù)則作用在元素下方的外邊距；
- 如果提供兩個參數(shù)，那么第一個參數(shù)會作用在元素上方和下方的外邊距，第二個參數(shù)會作用在元素的左右兩側(cè)的外邊距；
- 如果只提供一個參數(shù)，那么這個值將同時作用于元素上下左右四個方向的外邊距。
【示例】使用 margin 屬性為元素設(shè)置外邊距：
<!DOCTYPE html><html><head><style>div.box-one {border: 1px solid red;display:inline-block; /*將元素轉(zhuǎn)換為行內(nèi)元素*/}div.box-two {/*為了能更直觀的看出效果，這里為元素設(shè)置上邊框和背景色*/border: 1px solid black;background: #CFF;width: 200px;height: 100px;margin: 10px 1em;}div.box-three {/*為了能更直觀的看出效果，這里為元素設(shè)置上邊框和背景色*/border: 1px solid #CCC;background: #CCC;width: 150px;height: 50px;margin: 10px 0px 1ex 1em;}</style></head><body><div class="box-one"><div class="box-two">margin: 10px 1em;</div><div class="box-three">margin: 10px 0px 1ex 1em;</div></div></body></html>
運行結(jié)果如下圖所示：
圖：margin 屬性演示
外邊距折疊
外邊距折疊指的是相鄰的兩個或多個外邊距會在垂直方向上發(fā)生合并，合并為一個外邊距。關(guān)于外邊距折疊有以下幾點需要注意：
- margin 折疊只發(fā)生在塊級元素上；
- 浮動元素的外邊距不會與任何外邊距發(fā)生折疊；
- 設(shè)置了 overflow 屬性且值不為 visible 的塊級元素，將不會與它的子元素發(fā)生外邊距折疊；
- 絕對定位元素的外邊距不與任何外邊距發(fā)生折疊；
- 根元素（例如
<body>）的外邊距不與其它任何外邊距發(fā)生折疊。
- 在相鄰的兩個兄弟元素之間：
- 如果相鄰兩個元素外邊距的值都為正數(shù)，那么兩個元素的實際間距為兩個外邊距中較大的那個；
- 如果相鄰兩個元素外邊距的值都為負數(shù)，那么兩個元素的實際間距為兩個外邊距中較小的那個；
- 如果相鄰兩個元素外邊距的值一個為正數(shù)、一個為負數(shù)，那么兩個元素之間的實際間距為兩個外邊距相加的和。
圖：相鄰兄弟元素之間的外邊距折疊
- 在父元素與其子元素之間：（注意：父元素不能定義邊框和內(nèi)邊距，且父元素與子元素之間不能有其它元素）
- 如果父元素與子元素外邊距的值都為正數(shù)，那么折疊后的外邊距為兩個外邊距中較大的那個；
- 如果父元素與子元素外邊距的值都為負數(shù)，那么折疊后的外邊距為兩個外邊距中較小的那個；
- 如果父元素與子元素外邊距的值一個為正數(shù)、一個負數(shù)，那么折疊后的外邊距為兩個外邊距相加的和。
圖：父元素與其子元素之間的外邊距折疊
原文地址CSS外邊距