margin:[ <length> | <percentage> | auto ]{1,4}
默認(rèn)值:看每個(gè)獨(dú)立屬性
適用于:所有元素,除非 table | inline-table | table-caption
的表格類元素之外
繼承性:無(wú)
動(dòng)畫性:是
計(jì)算值:看每個(gè)獨(dú)立屬性
相關(guān)屬性:margin-top||margin-right||margin-bottom||margin-left
媒體:視覺(jué)
margin-top/margin-bottom
計(jì)算值為0
,margin-left/margin-right
取決于包含塊的剩余可用空間。詳見(jiàn):margin系列之keyword auto示例:
h2{margin:10px 0;} div{margin:20px 0;} ...... <h2>這是一個(gè)標(biāo)題</h2> <div> <h2>這是又一個(gè)標(biāo)題</h2> </div>
本例中,第一個(gè)h2的margin-bottom(10px),div的margin-top(20px),第二個(gè)h2的margin-top(10px)將被合并,它們之間的margin間隙最后是(20px),即取三者之間最大的那個(gè)值。
示例:
h2{margin:10px 0;} div{margin:20px 0;border:1px solid #aaa;} ...... <h2>這是一個(gè)標(biāo)題</h2> <div> <h2>這是又一個(gè)標(biāo)題</h2> </div>
本例中,第一個(gè)h2的margin-bottom(10px),div的margin-top(20px)將被合并,但第二個(gè)h2的margin-top不與它們合并,因?yàn)樗籦order分隔,不與它們相鄰。
非visible
的塊級(jí)元素,將不與它的子元素發(fā)生margin折疊;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+ |