margin

簡寫屬性語法:

margin:[ <length> | <percentage> | auto ]{1,4}

預設值看每個獨立屬性

適用於:所有元素,除非 table | inline-table | table-caption的表格類元素之外

繼承性:無

動畫性:看每個獨立屬性

計算值:看每個獨立屬性

媒 體:視覺

分拆縱向獨立屬性語法:

vertical-margin<length> | <percentage> | auto

vertical-margin = margin-top,margin-bottom

預設值0

適用於:所有元素,除非 table | inline-table | table-caption的表格類元素和非替代行內元素之外

繼承性:無

動畫性:當取值為 <length> | <percentage>

計算值:指定的百分比或絕對長度值

媒 體:視覺

分拆橫向獨立屬性語法:

horizontal-margin<length> | <percentage> | auto

horizontal-margin = margin-right,margin-left

預設值0

適用於:所有元素,除非 table | inline-table | table-caption的表格類元素之外

繼承性:無

動畫性:當取值為 <length> | <percentage>

計算值:指定的百分比或絕對長度值

媒 體:視覺

取值:

auto:
水平(預設)書寫模式下,vertical-margin計算值為0horizontal-margin取決於包含塊的剩餘可用空間。詳見:margin系列之keyword auto
<length>
用長度值來定義外補白。可以為負值
<percentage>
用百分比來定義外補白。水平(預設)書寫模式下,參照其包含塊的width進行計算,其它情況參照height,可以為負值

說明:

簡寫屬性。為元素設定所有四個方向(上右下左)的外邊距。
  • margin屬性接受1~4個參數值。如果提供四個參數值,將按上、右、下、左的順序作用於四邊;提供三個,第一個用於上,第二個用於左、右,第三個用於下;提供兩個,第一個用於上、下,第二個用於左、右;只提供一個,同時用於四邊。
  • 非替代(non-replaced)行內元素可以使用該屬性定義horizontal-margin;若要定義vertical-margin,必須改變元素為塊級或行內塊級。
  • 外延邊距始終透明,即不可見也無法設定背景等任何樣式。
  • 某些相鄰的margin會發生合並,我們稱之為margin折疊:

    示例:

    h2{margin:10px 0;}
    div{margin:20px 0;}
    ......
    <h2>這是一個標題</h2>
    <div>
    	<h2>這是又一個標題</h2>
    </div>

    本例中,第1個h2的margin-bottom,div的margin-top,第2個h2的margin-top是相鄰的,三者會被合並取其中最大的那個值作為最後的間隙,所以它們之間的margin間隙最後是(20px)。

    如果給上例中的div加上border的話:

    h2{margin:10px 0;}
    div{margin:20px 0;border:1px solid #aaa;}
    ......
    <h2>這是一個標題</h2>
    <div>
    	<h2>這是又一個標題</h2>
    </div>

    本例中,第一個h2的margin-bottom(10px),div的margin-top(20px)將被合並,但第二個h2的margin-top不與它們合並,因為它被border分隔,不與它們相鄰。

  • margin折疊常規認知:
    • margin折疊只發生在塊級元素上;
    • 浮動元素的margin不與任何margin發生折疊;
    • 設定了屬性overflow且值為非visible的塊級元素,將不與它的子元素發生margin折疊;
    • 絕對定位元素的margin不與任何margin發生折疊;
    • 根元素的margin不與其它任何margin發生折疊;
  • 對應的腳本特性為:margin
分拆縱向獨立屬性。為元素設定上、下外邊距。
  • 替代(Replaced)行內元素可以應用該屬性;非替代(non-Replaced)行內元素要使用該屬性必須改變元素為塊級或行內塊級。
  • 水平(預設)書寫模式下,margin 合並只發生在vertical-margin上。
  • 對應的腳本特性分別為:marginTop, marginBottom
分拆橫向獨立屬性。為元素設定上、下外邊距。
  • 所有的行內元素均可以應用該屬性。
  • 預設情況下,horizontal-margin不會發生 margin 折疊,除非將書寫模式改變為縱向。
  • 對應的腳本特性分別為:marginRight, marginLeft

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+

示例: