如何避开麻烦的margin叠加(margin collapsing)

如何避开麻烦的margin叠加(margin collapsing)
作者：Neoxone 发表时间： 2009年03月21号，星期六阅读：22,077 次

在斯芬克斯——ie私有属性haslayout这篇文章中，我们提到的第一个斯芬克斯之迷，其实就是一个margin叠加问题。
关于margin collapsing，在W3C中是有明文规范的，符合其规则的都将产生margin collapsing。W3C认为margin叠加后的布局界面更良好。

margin collapsing（css2.1规范）
margin collapsing（css2规范）

margin叠加现象（父子级别）：

 <!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>
<style type="text/css">
 *{padding:0;margin:0;}
 #wrap{background:#ccc;}
 #content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="content">margin:50px 0;</div>
</div>
</body>
</html>

可以看出wrap未被子层的margin所撑开。

但是，这种margin叠加往往不是我们所想要的效果（一些人甚至将此称为一个bug：margin叠加bug，也有称高度不适应bug的）——平心而论，我们努力的要避开margin collapsing多少也有些违背了W3C的初衷。不过，由于ie下经常有意无意的会触发haslayout，从而会避开margin叠加，这使得浏览器间显示不一。因此，我们还是有理由在适当时候彻底避开margin叠加的。

那么，如何避免这种margin叠加现象呢？

从《斯芬克斯——ie私有属性haslayout》那篇文章中，我们知道，ie下触发haslayout可以避开margin叠加。那么其他浏览器呢？

我们先看一下另两种解决方法。
方法一：在父级内部的添加上、下两个空元素。
有些教科书上将这种方法称为完美的解决方法。但实际当中我们一般不会使用，因为这种方法不仅要多加两个无意义元素标签，对这两个元素还要特别设置CSS使其高度为0。）:

<!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>
<style type="text/css">
 *{padding:0;margin:0;}
 #wrap{background:#ccc;}
 #content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div>&nbsp;</div>
<div id="content">margin:50px 0;<br />上下各添加一个额外空元素。元素只要不脱离文档流，就能在ie,ff等浏览器下避开margin-top塌陷。如果元素是脱离文档流的，只要是触发了haslayout，在ie下也能避开塌陷。这两个元素一般要设置其高为0,而不让其增加页面的额外高度。</div>
<div>&nbsp;</div>
</div>
</body>
</html>

第二种，在父级上使用border属性（属性值0和none除外）。
这个方法也不大经常使用，因为在wrap上至少要设置一个1px的多余边框（上下两个就是2px）,而且这条边线的颜色的颜色设置也是个问题，因为可能在wrap内部会使用背景图片(background-image),那么这条边线就无法伪装隐藏了。

 <!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>
<style type="text/css">
 *{padding:0;margin:0;}
 #wrap{background:#ccc;border:1px solid #ccc} /* border的颜色设置同background一样 */
 #content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="content">margin:50px 0;</div>
</div>
</body>
</html>

最后一个方法，就利用到了ie的haslayout原理了（清除浮动也用到了这种方法）。对于ff下，在父级（wrap）上使用overflow:hidden；对于ie则触发其layout——如何触发，可以看这篇文章：on having layout。

 <!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>
<style type="text/css">
 *{padding:0;margin:0;}
 #wrap{background:#ccc;overflow:hidden;width:100%}
 #content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="content">margin:50px 0;</div>
</div>
</body>
</html>

（overflow：hidden也会触发ie7中的layout。但是对之前的ie版本无效，否则倒是可以一个属性搞定）。