css中margin上下外边距重叠问题

最新推荐文章于 2023-09-10 14:12:45 发布

weixin_34132768

最新推荐文章于 2023-09-10 14:12:45 发布

阅读量221

点赞数

原文链接：http://www.cnblogs.com/lingdublog/p/6438035.html

版权

css的盒子模型里是这样规定两个对象之间的距离的：对象之间的间距是由两个对象的盒子模型的最终计算值得出来的，也就是说两个对象之间的间距就是两个对象的距离，但是当遇到两个对象一个有下外边距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>  
#one{width:200px;height:100px;background-color:#ff0000;margin:10px;}  
#two{width:200px;height:100px;background-color:#00ff00;margin:10px;}  
</style>  
</head>  
<body>  
<div id="one"></div>  
<div id="two"></div>  
</body>  
</html>

如果你认为one和two盒子的距离是20px，那你就错了，它们的真正距离是10px。

这是css的一个特性，当空白边叠加时，以较大的margin值为准。这在html和xhtml中都是一样的情况。

但如果把上例中的one和two盒子都进行float，那情况又不同了，如：

<style>  
#one{width:200px;height:100px;background-color:#ff0000;margin:10px;float:left;}  
#two{width:200px;height:100px;background-color:#00ff00;margin:10px;float:left;clear:both;}  
</style>