CSS margin出现传递和合并的问题

margin在使用过程中往往会出现难以预料的问题，比如在垂直方向会出现兄弟元素合并问题、父子元素传递问题。

上下margin传递（左右不会传递）：

• margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素；
• margin-bottom传递：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素；
• 解决办法：
  • 触发BFC，设置overflow为auto/hidden
  • 建议使用margin设置兄弟元素的间距，使用padding设置父子元素的间距

上下margin折叠（左右不会折叠）

• 垂直方向上2个margin会合并成1个margin（取较大值），这种现象叫做collapse（折叠）
• 解决办法：
  • 只设置一个margin