<div class="main"> css样式： body{margin:0px; padding:0px;} 解释： 当第一个p标签有margin-bottom:20px; 第二个p标签有margin-top:10px; 在我们理解为两个p标签的边距应该为20px＋10px＝30px； 但是在浏览器中却是20px的高度，这就发生的重叠。 全部代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </body>
<p class="one">测试代码</p>
<p class="two">测试代码</p>
</div>
*{margin:0px; padding:0; font-family:"宋体"; font-size:12px; }
.main{width:200px; background:#ccc; }
.main p.one{margin-bottom:20px; border:1px solid #000;background:#cc0000; }
.main p.two{margin-top:10px; border:1px solid #000;background:#cc0000;}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0px; padding:0px;}
.main p.one{margin-bottom:20px; border:1px solid #000;background:#cc0000; }
.main p.two{margin-top:10px; border:1px solid #000;background:#cc0000;}
</style>
</head>
<body>
<div class="main">
<p class="one">测试代码</p>
<p class="two">测试代码</p>
</div>
</html>
