记一次外边距合并

外边距合并分为很多种情况,最普通的是上下两个div之间上面一个设置margin-bottom下面一个设置了margin-top,两个盒子之间的距离不是两个的外边距相加,而是数值大的那个外边距。

举个直观的例子,就像两个人打架,外边距就是攻击范围,谁的攻击范围大,就决定了两个人之间的距离。

其次还有其他形式的外边距合并。这里做下总结。

一、兄弟元素之间

记一次外边距合并

 

二、父子之间

记一次外边距合并

如果要清除合并;

1、可以创建BFC:

  • 1、float的值不是none。
  • 2、position的值不是static或者relative。
  • 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • 4、overflow的值不是visible

2、可以创建边框或者设置padding(padding不为0);

 三、自身合并

记一次外边距合并

参考

[1]w3c.CSS 外边距合并:https://www.w3school.com.cn/css/css_margin_collapsing.asp

[2]Leon_94.什么是BFC?看这一篇就够了:https://blog.****.net/sinat_36422236/article/details/88763187