IE6中width的问题
按照样式表的规则，对象的实际宽度为其下列属性值之和：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
而在IE6以前的版本，对象的实际宽度却等于：
margin-left + width + margin-right
在IE7中，已经提供了针对此问题的解决方案
百分数是相对于父元素的 width(height) 计算的
垂直方面margin合并的例子
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
Code
<!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=gb2312" />
<title>盒模型问题-空白边叠加</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
#a{
width:100px;
height:100px;
background-color:#eeeeee;
border:5px solid #bbbbbb;
margin:10px;
}
#b{
width:100px;
height:100px;
border:5px solid #bbbbbb;
background-color:#999999;
margin:10px;
}
-->
</style></head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
Code
<!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=gb2312" />
<title>盒模型问题-空白边叠加</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
#a{
width:100px;
height:100px;
background-color:#eeeeee;
border:5px solid #bbbbbb;
margin:10px;
float:left;
}
#b{
width:100px;
height:100px;
border:5px solid #bbbbbb;
background-color:#999999;
margin:10px;
float:left;
clear:left;
}
-->
</style></head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
