margin上边距下边距覆盖

首先，我们知道水平间距不会重合覆盖

但是，两个或多个块级盒子的垂直相邻边界会重合。

边界宽度结果的如下：

如果都是正值：相邻边界宽度中最大的值。

如果有一个负值：在最大的正边界中减去绝对值最大的负边界。

如果都是负值：从零中减去绝对值最大的负边界。

但是，事有例外，下面不会重叠：

相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系

相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样

overflow 不为默认值visible，设置其他属性的元素和它的子元素之间的margin不会被重叠

设置了绝对定位 absolute和 display: inline-block 的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样

为此，我们找到了防止外边距重叠解决方案：

虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考：

外层元素padding代替

内层元素透明边框 border: 1px solid transparent;

内层元素绝对定位 postion: absolute:

外层元素 overflow: hidden;

内层元素加float: left;或display: inline-block;

内层元素padding: 1px;

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/17978124.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！