css margin叠加问题 - 技术教程

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/"> 
  
  *{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>

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

相关文章：

你感兴趣的文章：

标签云：