盒子模型高度坍塌

css中盒子模型中有关margin问题

1、margin的传递-父子关系

如何防止进行传递？

1、给父元素设置padding-top\padding-bottom
2、给父元素设置border
3、触发BFC：设置overflow为auto/hidden在这里插入图片描述

2、上下margin折叠-兄弟关系

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能合并为1个margin，这种现象叫做collapse（折叠）
水平方向则无

折叠最终值的计算规则
两个值进行比较，取较大的值

如何防止折叠？
我们首先来看一下折叠的根本问题

此时间距只有30px，
如何防止margin collapse
​ 只设置其中一个margin就可以了

margin collapse 的用处
​ 连续段落之间的margin，刚好需要这种折叠效果。

如果真需要必须两个间距