css margin叠加问题-百分百源码网

css margin叠加问题

发布时间：01/15 来源：浏览：关键词：

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

< !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" /> 
</head><head> 
<style type="text/css"> 
*{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 auto</div> 
<div class="content">margin: 20px auto</div> 
</div> 
<div class="box"> 
<div class="content">margin: 20px auto</div> 
</div> 
<div class="box"> 
<div class="content">margin: 20px auto</div> 
</div> 
<div class="an-box">margin: 50px auto</div> 
</body> 
</html>

解决这个问题的方法有不少，先来看看这个，在外层的容器中加：overflow:hidden;zoom: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" /> 
</head><head> 
<style type="text/css"> 
*{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 auto</div> 
<div class="content">这里两个还是存在叠加margin: 20px auto</div> 
</div> 
<div class="box"> 
<div class="content">margin: 20px auto</div> 
</div> 
<div class="box"> 
<div class="content">margin: 20px auto</div> 
</div> 
<div class="an-box">margin: 50px auto</div> 
</body> 
</html>