css盒子模型在实际应用中使用margin定义块元素的垂直外边距时，可能会出现外边距的合并情况解决方法。

1.使用margin定义块元素的垂直外边距时，可能会出现外边距的合并的两种情况：

（1）第一种：相邻块元素垂直外边距的合并。

如下图所示：设置两个块元素的大小分div1： width: 300px; height: 30px; dv2： width: 300px;height: 300px;

 输入代码，执行后我们会发现同时有上下两个紧挨的盒子。如图所示：

下一步，我们需要给盒子一个50px的外边距。那么假设我们对我们对上面这个盒子div1添加20px的margin-bottom。对下面的这个盒子div2添加30px的margin-top。按道理来讲这样也满足了需求，但实际情况如何，我们通过代码来实现

然后执行程序，显示后的效果如图所示，利用调试工具我们发现，两个盒子间的margin显示为30px。在这里本应该显示外边距margin为50px。但是实际效果只显示了30px。

这种现象我们成为margin外边距的合并情况。像这种情况，两个盒子的margin只会显示比较的那一侧的px。无法达到我们所期望的效果。那我们应该如何解决这种问题呐？

解决方法：只给一个盒子添加margin的值    如图所示：我想给这个盒子50px的margin，只需要对其中任何一个盒子独立添加即可。

如此这样进行设置，便解决了我们的块元素外边距的合并问题。这种现象，在以后的开发过程中会经常遇到，大家还是要保持一定程度的重视。