首页 > 代码库 > 5.17学习笔记
5.17学习笔记
关闭边栏Div+Css教程模板无忧>建站教程>Div+Css教程>Div+CSS教程>收藏分享查看评论Div+CSS教程大中小margin在垂直取值时取最大值_Div+CSS教程3/512345编辑Tag赚U币教程Tag：margin最大值添加
企业网站必备神器!获取访客联系方式买空间 买主机，就选网硕互联！ 获取访客QQ,手机号码!margin在垂直取值的时候是重叠的，如果上下盒模型分别都有margin，那么取较大值。这一点是值得大家注意的了，平时如果在上下两个容器都设置了margin时，注意垂直取值时并不是两个值相加，而是取较大值。
一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE6下便会产生双边距问题：如果设置 float:left 那么左边距会是原来margin的两倍；如果是float:right，那么右边距会是原来margin的两倍。
代码如下：
[html] view plain copy print?
01.<html>
02. <head>
03. <style>
04. body{
05. margin:0px;
06. padding:0px;
07. }
08. #box{
09. float:left;
10. margin:10px;
11. width:200px;
12. height:200px;
13. background:#696969;
14. }
15. </style>
16. </head>
17. <body>
18. <div id="box"></div>
19. </body>
20.</html>
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
float:left;
margin:10px;
width:200px;
height:200px;
background:#696969;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
如下是各浏览器的效果图（左侧为chrome 中间为firefox 右侧是IE6）：
从上面图中可以看到，最右侧的IE6的左边距是原本边距的2倍。
关于IE6以下版本兼容问题
解决方法：
在2004年以前，IE6这个双边距问题一直没有得到一种很好的解决方法，普遍的做法是把边距设置为目标边距的1/2，以错对错的方法去实现。2004年之后，有一个工程师发现了一个简单的解决方法，到现在也是一直用这个方法来消除IE6双边距问题的。方法很简单：只需要给id为box的这个div加上一条简单的css代码就够了。
解决代码：
[html] view plain copy print?
01.<html>
02. <head>
03. <style>
04. body{
05. margin:0px;
06. padding:0px;
07. }
08. #box{
09. _display:inline;
10. float:left;
11. margin:10px;
12. width:200px;
13. height:200px;
14. background:#696969;
15. }
16. </style>
17. </head>
18. <body>
19. <div id="box"></div>
20. </body>
21. </html>
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
_display:inline;
float:left;
margin:10px;
width:200px;
height:200px;
background:#696969;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
如下是IE6的测试效果图：
5.17学习笔记