在网页制作中我们经常用到margin属性，但我们有没有注意到在设置 margin 属性时会存在重叠问题呢？
我们来看一个例子：
<!doctype html><html><head><meta charset="utf-8"><title>margin 重叠问题</title><style type="text/css">* { margin: 0; padding: 0;
}div { border: 1px solid red; width: 200px;
}#box1 { margin-bottom: 6px; }#box2 { margin-top: 0px; } /*接下来的修改位置*/</style></head><body><div id="box1">上边元素</div><div id="box2">下边元素</div></body></html>效果图：
上下元素间距为6px.png
根据代码我们很容易看出上边元素与下边元素的margin外边距为6px，当然经过测量实际值也为6px；
让我们来给下边元素设置一个margin 值，修改代码如下：#box2 { margin-top: 3px; }
本想着上下元素此时会变成9px ，但是在浏览器中并没有发生任何变化：
上下元素间距仍然为6px.png
于是我分别把#box2 { margin-top: 1px; }#box2 { margin-top: 2px; }#box2 { margin-top: 3px; }#box2 { margin-top: 4px; }#box2 { margin-top: 5px; }#box2 { margin-top: 6px; }#box2 { margin-top: 7px; }
都测试了一遍，发现设置1px~6px都没有反应，但当我把#box2 { margin-top: 7px; }时发生了变化，上边元素与下边元素间距发生了1px微小的变化（图片效果有些不明显，你们可以自测一下）。
上下元素间距为7px.png
经过测量上下边距为7px。
所以我们可以总结出：当下边元素设置的margin-top值小于上边元素的margin-bottom时，两个元素的边距仍为margin-bottom的值（谁的值大为谁），margin属性确实会存在重叠问题，margin属性值是以附近元素的边框为起点，而不是附近元素的外补白边缘为起点。
声明：此文只代表个人见解，只供参考！联系QQ：1522025433作者：暗恋桃花源丫
链接：https://www.jianshu.com/p/8f4308944653
共同学习，写下你的评论
评论加载中...
作者其他优质文章
