记一次外边距合并
外边距合并分为很多种情况,最普通的是上下两个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