CssMarginCollapsing_html/css

情境

在製作 Banner 的時候，通常需要一個 Logo 在畫面的左上，於是乎我們就會準備一個 div 把美美的 logo 往裡面塞。

如圖所示，我們的 Logo 還希望離上方有些為的距離，依邏輯來說物件離邊緣要有距離，我們就會幫他補上 margin ，於是乎就會出現如下的問題。

See the Pen Collapsing margins (for blog) by Wcc723 ( @Wcc723 ) on CodePen .

仔細看看上面所發生的問題，內元素的 margin 沒有起了作用，而是被外層所吸收。

失控的 Margin top

在遇到這個問題時，如果不熟的情況下就會說：「Bug 啦！」，通常只能用各種

其它的方式去解決這個問題，但只要拿抓住發生的原因，就能輕易的去克服它。

這個問題在 w3c 有提到這問題稱為「 Collapsing margins 」，我將這部分縮減為以下幾點：

1. 內外層均為 “塊狀” 元素。
2. 外層塊狀元素沒有 border、padding、overflow。
3. 內層第一個塊狀元素(空元素不算)，不包含 float、absolute。

所以如果要避開發生這個問題，就是避免存在以上這些問題，比如說不使用塊狀元素、外層加入padding、內層加入 float 等等，以下就列出一些解決方案。

See the Pen Collapsing margins (resolve for blog) by Wcc723 ( @Wcc723 ) on CodePen .

這也是我們在與學員之間的問答中常遇到的，這次找個機會寫個文章跟大家分享分享。