CSS中的外边距合并问题（外边距塌陷）

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

margin

margin指外边距，是盒子模型的组成之一（盒子=内容+边框+外边距+内边距），类似于表格中的cellspacing，具体用法如下：

一个值时，指定上右下左的外边距
两个值时，第一个值为上下外边距，第二个值为左右外边距
三个值时，第一个值为上外边距，第二个值为左右外边距，第三个值为下外边距
四个值时，分别对应上、右、下、左四个外边距
也可以单独设置，如margin-left，margin-top等

<div class="box"></div>
<div class="box1"></div>
<style>.box {width: 100px;height: 100px;background-color:rosybrown;}.box1 {width: 100px;height: 100px;background-color: teal;margin-top: 50px;}
</style>

效果图为
在这里插入图片描述

外边距合并问题

外边距合并问题也称为外边距塌陷，大致有以下两种情况

1，相邻块元素之间的塌陷问题

比如两个垂直排列的元素，上一个元素设置了下外边距，而下面一个元素同时也设置了上外边距，一开始我们肯定会想当然的认为两个元素的距离肯定是两者之和，然而并不是，实际的距离应该是两者之间更大的那一个，这就是外边距塌陷问题。

此时肯定有人疑问怎么解决，其实解决办法也很简单，那就只设一个就可以了，要么只设上外边距，要么就只设置下外边距，不要多此一举就行。

2，嵌套块元素之间的塌陷问题

这是外边距合并的另一种情况，出现在父子元素之间，当父元素没有边框，且没有设置内边距时，如果里面的子盒子设置了上外边距，理论上是可以设置与父盒子之间的边距，但实际情况却不然，具体看下

<div class="father"><div class="son"></div>
</div>
<style>.father {width: 200px;height: 200px;background-color: teal;}.son{width: 100px;height: 100px;margin: 0 auto;margin-top: 30px;background-color: rosybrown;}
</style>