margin叠加的问题

日期：2013-11-27 来源：攀枝花惠康网络公司

今天有人问我一个margin叠加的问题。有些人喜欢把margin叠加归纳到BUG中去，有些却不这么认为，他们的理由是Firefox也有这个问题，所以不能叫bug。呵呵仿佛有点牵强。其实巨匠只要看看w3c的文档，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；

因为margin在浏览器中的BUG良多，有人强烈举荐尽量不要使用margin，而用padding！我很奇异，我们在前端开发的时辰，虽然他们良多时辰可以随便用什么，可是良多时辰我们不得不用margin。绝年夜年夜都的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; 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。这里就不说了。

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。