Collapsing margins
兩個相鄰元素之間的垂直間距 (vertical margins) 會折疊(合併)取最大的值 水平之間的間距 (horizontal margins) 並不會折疊 只會發生在區塊 (block)元素之間 設定 float、absolute 時也不會發生折疊
兄弟相鄰
margin-bottom: 16px
margin-top: 8px
紅色跟綠色區塊之間的間距折疊取最大值 16px
父與第一/最後的子
block
margin-top: 16px
父: margin-top: 8px; margin-bottom: 8px; margin-bottom: 16px
block
第一/最後的子元素跟父元素貼在一起，之間沒有 content、padding-top、padding-bottom、border-top、border-bottom 所以子元素的外間距就跟父元素折疊取最大值 16px
空區塊元素
block
block
兩個灰色區塊之間有一個空區塊元素 margin-top: 16px; margin-bottom: 24px; 與上下的間距不會加起來，而是折疊取最大值 24px
html
<div class="bg-gray-400 px-2 py-1 text-white">block</div>
<div class="mt-4 mb-6"></div>
<div class="bg-gray-400 px-2 py-1 text-white">block</div>父子外間距折疊避免方式
inline-block
block
margin-top: 16px
父: display: inline-block; margin-top: 8px; margin-bottom: 8px; margin-bottom: 16px
block
padding-top、padding-bottom
block
margin-top: 16px
父: padding-top: 16px; padding-bottom: 16px; margin-top: 8px; margin-bottom: 8px; margin-bottom: 16px
block
border-top、border-bottom
block
margin-top: 16px
父: border-top: 1px solid #ef4444; border-bottom: 1px solid #ef4444; margin-top: 8px; margin-bottom: 8px; margin-bottom: 16px
block