从盒子模型我们可以得知：
对象之间的间距是由两个对象的盒子模型的最终计算值得出来的。但有一种特殊情况＝＝＝＝>上下对象的间距问题。
当两个对象呈现出上下关系时而且都具备margin属性的时候，此时由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" />
<title>Margin叠加问题</title>
<style type="text/css">
#a{width:100px;height:100px;background-color:#eeeeee;border:5px solid #bbbbbb;margin:10px;}
#b{width:100px;height:100px;background-color:#999999;border:5px solid #bbbbbb;margin:10px;}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html> 也许你会认为：由于对象a有下边距10px,b对象有上边距10px，因此他们的上下距离是20px;其实不然，它们真正的距离都是10px.这就是"空白边叠加规则"，空白边叠加时，以较大的margin值为准。比如讲上面a对象的margin:50px，那么a与b的上下间距变成50px对于CSS的解释规则而言：一旦把某个元素设定了float属性，那么它们将不在遵循空白边叠加规则。下面代码所示：<style type="text/css"> #a{width:100px;height:100px;background-color:#eeeeee;border:5px solid #bbbbbb;margin:10px;float:left;} #b{width:100px;height:100px;background-color:#999999;border:5px solid #bbbbbb;margin:10px;float:left;clear:left;} </style>
这样a与b之间上下间距就是20px了。由次细心的朋友会发现，在IE6.0下左边距也变成20px了，而IE7.0与FF左边距都是10px,这引发了另外一个问题，IE6.0盒子模型问题====>外边距叠加问题。
扫一扫
1357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
