CSS 日常疑问

[preflower]

何时 margin 会折叠，何时不会；何时 margin 会溢出，何时不会？原理

[preflower]

何时 margin 会折叠，何时不会；何时 margin 会溢出，何时不会？原理

Margin 叠加

毗邻(没有被 padding, border, line box 和 clear 分隔开)元素在普通流中，则会出现Margin折叠

避免 Margin 叠加

• inline-block元素不会与毗邻元素叠加
• BFC元素不会与其子元素叠加
• 脱离普通流即可，即元素设置为float, absolute

Margin 溢出

• 即父子元素 Margin 叠加；但是父元素并没有设置 Margin 导致 父元素下移

参考

深入理解CSS外边距折叠