KDUED.COM

最近在写个前端与设计的交流PPT，其中有个地方测试了一下多种情况下盒模型的表现，其中有个小地方，关于margin叠加的一种情况，我是第一次发现，估计相对于其他前辈而言，不值一提，自己记录一下吧。

场景是这样的：外层div给他固定了高度和宽度（500px*500px），内层div（300px*300px）也一样但是高度和宽度比外层的 小，为的是减少其他因素的影响，然后对内层div进行margin:10px。问题就在这里了，一直以来都晓得垂直空白边会叠加，但没想到这样也能叠加， 并且ie系列（6，7）和firefox,opera等标准浏览器的表现不一样。

code:

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=”http://www.w3.org/1999/xhtml”>
< head>
< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
< title>margin</title>
< style type=”text/css”>
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td{margin:0;padding:0;}
#wrapper{width:500px;height:500px;background:#DADADA;}
#inner{width:300px;height:300px;background:#050505;margin:10px;}
</style>
</head>
< body>
< div id=”wrapper”>
< div id=”inner”>< /div>
< /div>
< /body>
< /html>

DEMO Here!!

看了demo后 你会发现，#wrapper在firefox,opera等标准浏览器中上方出现空白填充，而#inner顶部是直接到了外层元素的边缘， 与#wrapper的边缘重合了。而在Iie系列（6，7）下则是另一种情况，空白填充没有叠加，#wrapper是没有margin的。

也就是说，内外的元素即使任意一个垂直方向margin为零，另一个有垂直方向margin，依然会出现叠加。