css中margin边界叠加问题：
看个同方向和异方向margin重叠现象：
<!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>无标题文档</title> <style type="text/css"> body { background-color:#CFC} .outer{ margin: 30px; width: 300px; background-color:#669; } .inner1{ margin: 30px; padding: 8px; background-color:#3CF; color: white;} .inner2{ margin: 30px; padding: 8px; background-color:#96F; color: white; } </style> </head> <body> <div class="outer"> <div class="inner1">margin1</div> <div class="inner2">margin2</div> </div> </body> </html>
效果为：
图1
这里inner1与outer的上边距重叠了，inner1的下边界与inner2的上边界重叠了，inner2的下边距与outer的下边距重叠了
参考这里的解决办法:margin边界重叠问题
只知道如何解决同方向margin重叠问题：
①给外部的div添加清除浮动相同的样式即可。常用的样式代码为：overflow:hidden; zoom:1;
.outer{ margin: 30px; 300px; background-color:#669;overflow:hidden; zoom:1}
效果将如下：
图2
②增加些边缘属性。例如padding值，padding:1px;或是border属性，border:1px solid #cacbcc。
.outer{ margin: 30px; 300px; background-color:#669;padding:1px;}
效果将如图2。
然后再认真滴看下这篇博客：CSS中margin边界叠加问题及解决方案
没看懂了.....
后续：在群里看到一个这样的问题
1.
<!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>无标题文档</title> <style type="text/css"> body,html{ margin:0; padding:0; } #box{ width:300px; height:300px; background-color:#F00; } #box .center{ display:block; width:50px; height:50px; margin:20px; background-color:#3F6; } </style> </head> <body> <div id="box"> <div class="center"></div> </div> </body> </html>
图5.1
效果如图5.1所示。
再看下改下这个#box .center{ display:inline-block; width:50px; height:50px; margin:20px; background-color:#3F6; }
效果将是如下：
为什么会出现这种现象：
看下这个资料