Css盒子模型外边距合并与塌陷

1. 外边距合并

场景&＃xff1a;垂直布局的块元素&＃xff0c;添加了上下margin会合并。

结果&＃xff1a;取两者距离为margin的最大值

解决方法&＃xff1a;

• 只给其中的一个盒子设置margin

代码示例&＃xff1a;

俩者中box盒子的margin值最大&＃xff0c;结果取值80px。

解决&＃xff1a;

不管拉开的距离有多长&＃xff0c;给其中一个盒子写就可以了。

2. 外边距塌陷

场景&＃xff1a;相互嵌套的块元素&＃xff0c;子元素的margin-top会作用在父元素上。

结果&＃xff1a;导致父元素一起往下移动

解决方法&＃xff1a;

• 给父元素设置border-top或padding-top&＃xff08;分割父元素的 margin-top&＃xff09;
• 给父元素设置&＃xff1a;overflow&＃xff1a;hidden
• 转换成行内块元素
• …

代码示例&＃xff1a;

塌陷

解决&＃xff1a;

给父级添加相对应的属性&＃xff0c;所谓子不教父之过。