CSS垂直外邊距合併到底是怎麼回事？

深入解析CSS垂直外邊距合併現象

CSS樣式設計中，垂直外邊距合併是常見問題。它指的是相鄰塊級元素的垂直外邊距並非簡單疊加，而是會發生合併。理解其機制和規避方法，對精確控製網頁佈局至關重要。

何為垂直外邊距合併？簡單來說，當兩個或多個塊級元素垂直排列，且中間無其他內容（例如內聯元素或文本）隔開，它們的垂直外邊距就會合併。合併後的外邊距取較大值；若方向相反（一正一負），則取兩者絕對值之差。

具體情況如下：

1. 相鄰兄弟元素:直接相鄰的兄弟塊級元素（例如兩個<div>元素）的垂直外邊距會合併。<li><p><strong>父元素與子元素:</strong>若塊級元素是父元素的唯一子元素，且父元素無內邊距（padding），則父元素與子元素的垂直外邊距會合併。</p></li> <li><p><strong>相鄰塊級元素，間距為零:</strong>即使中間有空行或註釋，多個相鄰塊級元素的垂直外邊距也會合併。</p></li> <p>避免垂直外邊距合併的方法：</p> <ol> <li><p><strong>使用邊框（border）:</strong>在相鄰塊級元素間添加邊框，可有效阻止合併。</p></li> <li><p><strong>使用內邊距（padding）:</strong>為其中一個或兩個元素添加內邊距，也可避免合併。</p></li> <li><p><strong>使用塊級格式化上下文（BFC）:</strong>觸發BFC（例如設置<code>overflow: hidden; 、 float屬性等）可創建新的BFC，阻止外邊距合併。 BFC是頁面獨立渲染區域，能阻止外邊距合併及其他佈局特性。