解决外边距（margin）塌陷合并问题

本文主要是介绍解决外边距（margin）塌陷合并问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、什么是外边距塌陷

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

(1) 相邻块元素垂直外边距的合并

1.当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
2.下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
3.取两个值中的较大者**这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

 

解决方案：

尽量给只给一个盒子添加margin值

代码演示：

<style>        .top,        .bottom {            width: 200px;            height: 200px;            background-color: pink;        }        .top {            margin-bottom: 100px;        }        .

这篇关于解决外边距（margin）塌陷合并问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---