空白边叠加
最近在写个前端与设计的交流PPT，其中有个地方测试了一下多种情况下盒模型的表现，其中有个小地方，关于margin叠加的一种情况，我是第一次发现，估计相对于其他前辈而言，不值一提，自己记录一下吧。
场景是这样的：外层div给他固定了高度和宽度（500px*500px），内层div（300px*300px）也一样但是高度和宽度比外层的小，为的是减少其他因素的影响，然后对内层div进行margin:10px。问题就在这里了，一直以来都晓得垂直空白边会叠加，但没想到这样也能叠加，并且ie系列（6，7）和firefox,opera等标准浏览器的表现不一样。
code:
Tips:You can change the code before run.
看了demo后你会发现，#wrapper在firefox,opera等标准浏览器中上方出现空白填充，而#inner顶部是直接到了外层元素的边缘，与#wrapper的边缘重合了。而在Iie系列（6，7）下则是另一种情况，空白填充没有叠加，#wrapper是没有margin的。
也就是说，内外的元素即使任意一个垂直方向margin为零，另一个有垂直方向margin，依然会出现叠加。
^_^哈
还真没见过捏，无法避免么？
在标准浏览器里，这个是正常的。。
你这个很正常的是很典型的空白边叠加问题，我刚刚尝试了下在#wrapper上加上一像素的边框或者给它加入一像素的内边距都可以解决这个问题的，其原理大概可能就是当一个块状包含另一个块状时，二他们2者间也没填充和边框将空白边隔离开就产生这个问题了，而IE不会这样大概是因为IE加了宽度和高度所以引发了layout所以正常理解吧！