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将全部坍缩.