css margin叠加问题

w3c认为margin叠加是合理的。不管是不是bug，但是这个问题真的存在。看下面这个例子：

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.*w**3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
html xmlns="http://www.**w*3.org/1999/xhtml"> 
head> 
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

head>head> 

style type="text/"> 
*{padding:0;margin:0;}  
.box{background:#ccc; }  
.content{background:#eee;margin: 20px auto;}  
.an-box{ margin:50px auto;background:#999999;}  

style> 


head> 

body> 
div class="box"> 
div class="content">margin: 20px autodiv> 
div class="content">margin: 20px autodiv> 

div> 

div class="box"> 
div class="content">margin: 20px autodiv> 

div> 

div class="box"> 
div class="content">margin: 20px autodiv> 

div> 

div class="an-box">margin: 50px autodiv> 

body> 


html> 

解决这个问题的方法有不少，先来看看这个，在外层的容器中加：overflow:hidden;zoom:1；

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.*w**3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
html xmlns="http://www.**w*3.org/1999/xhtml"> 
head> 
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

head>head> 

style type="text/"> 
*{padding:0;margin:0;}  
.box{background:#ccc; overflow:hidden;zoom:1 }  
.content{background:#eee;margin: 20px auto; }  
.an-box{ margin:50px auto;background:#999999;}  

style> 


head> 

body> 
div class="box"> 
div class="content">这里两个还是存在叠加margin: 20px autodiv> 
div class="content">这里两个还是存在叠加margin: 20px autodiv> 

div> 

div class="box"> 
div class="content">margin: 20px autodiv> 

div> 

div class="box"> 
div class="content">margin: 20px autodiv> 

div> 

div class="an-box">margin: 50px autodiv> 

body> 


html> 

还有外层的容器中加边框属性，在叠加元素加空块状元素等等。。还有就是用padding来取代margin