最近在写个前端与设计的交流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后 你会发现，#wrapper在firefox,opera等标准浏览器中上方出现空白填充，而#inner顶部是直接到了外层元素的边缘， 与#wrapper的边缘重合了。而在Iie系列（6，7）下则是另一种情况，空白填充没有叠加，#wrapper是没有margin的。
也就是说，内外的元素即使任意一个垂直方向margin为零，另一个有垂直方向margin，依然会出现叠加。
cnscorpio2008年8月29日 20:45
貌似截图有点点问题。。大家看demo吧
cnscorpio2008年9月2日 21:45
在这种情况时，要考虑一下这几种浏览器的hack，或者避免使用，而用padding等方式去避免。。
橘子2008年11月17日 13:37
给div 设置border就不会这样了
cnscorpio2008年11月17日 13:44
恩，padding和border都可以。
前端网2008年11月30日 02:51
我本地测试IE67都没问题！FF和Oprea我喜欢这样做：
给父元素加overflow:hidden;因为加border和加padding都会影响盒模型的大小！
cnscorpio2008年11月30日 10:53
@前端网
给父元素加overflow:hidden;倒是没有试过，我测试了一下，的确有效，谢谢哦。哈哈