在网页制作中我们经常用到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
网友评论