建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSSmargin（外邊距）
元素的外邊距（margin）是圍繞在元素邊框以外（不包括邊框）的空白區(qū)域，這片區(qū)域不受 background 屬性的影響，始終是透明的。
圖：margin-top、margin-bottom、margin-right、margin-left 屬性演示
圖：margin 屬性演示
圖：相鄰兄弟元素之間的外邊距折疊
圖：父元素與其子元素之間的外邊距折疊
為元素設(shè)置外邊距
默認(rèn)情況下如果不設(shè)置外邊距屬性，HTML 元素就是不會有外邊距，但也有例外的情況，因?yàn)闉g覽器會為一些 HTML 元素設(shè)置默認(rèn)的外邊距，例如
元素。您可以使用下面的屬性來為 HTML 元素設(shè)置外邊距：
- margin-top：設(shè)置元素上方的外邊距；
- margin-bottom：設(shè)置元素下方的外邊距；
- margin-right：設(shè)置元素右側(cè)的外邊距；
- margin-left：設(shè)置元素左側(cè)的外邊距；
- margin：外邊距的簡寫屬性，可以同時設(shè)置元素四個方向（上下左右）的外邊距。
上述外邊距屬性的可選值如下表所示：
| 值 | 描述 |
|---|---|
| auto | 由瀏覽器計(jì)算外邊距的尺寸 |
| length | 使用具體數(shù)值配合 px、cm 等單位來定義元素外邊距的尺寸，可以為負(fù)值，默認(rèn)值為 0px |
| % | 定義基于父元素的寬度百分比的外邊距，可以為負(fù)值 |
| inherit | 從父元素繼承外邊距屬性的值 |
【示例】使用 margin-top、margin-bottom、margin-right、margin-left 幾個屬性分別設(shè)置元素四個方向上的外邊距：
margin-top: 10px;
margin-right: 1em;
margin-left: 1cm;
margin-top: 10px;
margin-bottom: 1em;
margin-right: 10px;
margin-left: 1cm;
運(yùn)行結(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è)置外邊距：
margin: 10px 1em;
margin: 10px 0px 1ex 1em;
運(yùn)行結(jié)果如下圖所示：
圖：margin 屬性演示
外邊距折疊
外邊距折疊指的是相鄰的兩個或多個外邊距會在垂直方向上發(fā)生合并，合并為一個外邊距。關(guān)于外邊距折疊有以下幾點(diǎn)需要注意：
- margin 折疊只發(fā)生在塊級元素上；
- 浮動元素的外邊距不會與任何外邊距發(fā)生折疊；
- 設(shè)置了 overflow 屬性且值不為 visible 的塊級元素，將不會與它的子元素發(fā)生外邊距折疊；
- 絕對定位元素的外邊距不與任何外邊距發(fā)生折疊；
- 根元素（例如
）的外邊距不與其它任何外邊距發(fā)生折疊。
1) 在相鄰的兩個兄弟元素之間：
- 如果相鄰兩個元素外邊距的值都為正數(shù)，那么兩個元素的實(shí)際間距為兩個外邊距中較大的那個；
- 如果相鄰兩個元素外邊距的值都為負(fù)數(shù)，那么兩個元素的實(shí)際間距為兩個外邊距中較小的那個；
- 如果相鄰兩個元素外邊距的值一個為正數(shù)、一個為負(fù)數(shù)，那么兩個元素之間的實(shí)際間距為兩個外邊距相加的和。
圖：相鄰兄弟元素之間的外邊距折疊
2) 在父元素與其子元素之間：（注意：父元素不能定義邊框和內(nèi)邊距，且父元素與子元素之間不能有其它元素）
- 如果父元素與子元素外邊距的值都為正數(shù)，那么折疊后的外邊距為兩個外邊距中較大的那個；
- 如果父元素與子元素外邊距的值都為負(fù)數(shù)，那么折疊后的外邊距為兩個外邊距中較小的那個；
- 如果父元素與子元素外邊距的值一個為正數(shù)、一個負(fù)數(shù)，那么折疊后的外邊距為兩個外邊距相加的和。
圖：父元素與其子元素之間的外邊距折疊
文章標(biāo)題：CSSmargin（外邊距）
文章分享：http://m.fisionsoft.com.cn/article/cdsochj.html
