margin與容器的尺寸
- 可視尺寸：對於沒有設定width的塊元素，margin可改變元素水平方向的可視尺寸
- 佔據尺寸：對於block/inline-block元素，margin可改變元素水平/垂直方向的佔據尺寸
margin與百分比單位
- 普通元素的百分比margin都是相對於容器的寬度計算的
- 絕對定位元素的百分比是相對於包含塊的寬度計算的
margin重疊
前提
- 只應用於block元素
- 不考慮writing-mode的情況下，只發生在垂直方向
場景
- 兄弟元素髮生重疊
-
父元素和第一個/最後一個子元素髮生重疊
-
margin-top重疊：第一個子元素設定margin-top相當於父元素設定margin-top
- 父元素BFC
- 父元素沒有border-top
- 父元素沒有padding-top
- 父元素和第一個子元素之間沒有inline元素
-
margin-bottom重疊：最後一個子元素設定margin-bottom相對於父元素設定margin-bottom
- 父元素BFC
- 父元素沒有border-bottom
- 父元素沒有padding-bottom
- 父元素和最後一個子元素之間沒有inline元素
- 父元素沒有height, min-height, max-height限制
-
-
空block元素髮生重疊（設定margin: 1em 0;只有1em高度）
- 元素沒有border設定
- 元素沒有padding設定
- 元素內沒有inline元素
- 元素沒有height或者min-height
重疊計算
- 正正取大值
- 正負值相加
- 負負最負值
margin: auto
作用前提和原理
前提block水平元素，未設定寬度的情況下元素會自動填充容器；margin的作用是分配元素寬度以外的剩餘空間
垂直居中
- writing-mode: vertical-lr
- 設定position:absolute;top:0;bottom:0;height，使元素垂直填充整個容器，這時候margin: auto在垂直方向上起作用
margin無效的可能
- 非替換的內聯元素，垂直方向的margin無效
- margin重疊
- table相關的元素，margin無效
- 絕對定位元素因無法與周邊元素產生間距，因此看似無效
- 跟隨浮動元素，有可能因margin值不夠，看似無效
- 內聯特性導致margin失效
margin的其他屬性
margin-start/margin-end:與流方向相關（direction, writing-mode）
margin-collapse: margin是否重疊，-webkit-margin-collapse: collapse（重疊）|discard（取消）|separate（分隔）