CSS margin collapse 规则

原文

外边距折叠（Margin Collapse）

这篇文章挺好的，关于 css 的 margin 属性的几条使用规则：

• 只有垂直方向的 margin 才会 Collapse，水平方向的不会；
• 只有相邻的 margin 才会 Collapse，比如用 </br> 隔开两个元素，这两个元素的 margin 不会折叠；
• Collapse 后，大的值生效；
• 子元素的 margin 会和它的父元素的相邻元素 Collapse，Nesting doesn't prevent collapsing；
• 相同方向的 margin 也会折叠，不要以为只有 margin-top 和 margin-bottom 才会折叠，两个 margin-top 也会 Collapse；
• 两个以上的 margin 也会 Collapse；
• 负的 margin 也会 ；
• Collapse 只对 flow layout 生效，对于 grid、flexbox 这些布局不生效，如果希望让这两种布局的元素产生间隔，可以用 gap 等属性。