Mastering margin collapsing

CSS 中, 有 3 种情况会导致 margin 的坍缩 (collapse).

1. 垂直方向相邻的两个兄弟元素, 上方元素设置了 margin-bottom, 下方元素设置了 margin-top 时, 二者间距取较大者;

2. 元素上方没有用 border, padding, inline-content 或清除浮动等方式将其第 1 个子元素与其 margin-top 分割开时, 该元素的 margin-top 将为其本身 margin-top 与其第 1 个子元素的 margin-top 的较大者, margin-bottom 同理;

3. 不占位, 即没有用有效的 border, padding, inline-content, height, min-height 等方式将其 margin-top 与其 margin-bottom 分割开时, 其 margin-top 和 margin-bottom 将全部坍缩.