【學習筆記】CSS深刻理解之margin

張鑫旭的CSS深刻理解之margin學習筆記

margin與容器的尺寸

• 可視尺寸：對於沒有設定width的塊元素，margin可改變元素水平方向的可視尺寸
• 佔據尺寸：對於block/inline-block元素，margin可改變元素水平/垂直方向的佔據尺寸

margin與百分比單位

• 普通元素的百分比margin都是相對於容器的寬度計算的
• 絕對定位元素的百分比是相對於包含塊的寬度計算的

margin重疊

前提

1. 只應用於block元素
2. 不考慮writing-mode的狀況下，只發生在垂直方向

場景

1. 兄弟元素髮生重疊

2. 父元素和第一個/最後一個子元素髮生重疊

   • 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限制

3. 空block元素髮生重疊（設置margin: 1em 0;只有1em高度）

   • 元素沒有border設置
   • 元素沒有padding設置
   • 元素內沒有inline元素
   • 元素沒有height或者min-height

重疊計算

1. 正正取大值
2. 正負值相加
3. 負負最負值

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（分隔）