最近经常在群里看到有人问display:inline;是干嘛用的！？
今天就举一个inline的用法，用于除去ie下margin两倍距离的问题！
先看个例子吧！
.floatbox {
float: left;
width: 100px;
height: 100px;
background-color:deeppink;
margin-top: 20px;
margin-left:100px;
}
我们将一个<div>设置了float:left 和 margin-left:100px;我们的原意是将这个粉红色的div向左漂浮，并在左边留出100像素的空隙。但是结果会如何呢？让我们来看看这个示例分别在IE6、IE7、FireFox2中的效果截图吧（IE6和IE7的共存方法可以参看一文）——
示例页面在IE6、IE7和FireFox2中的效果截图
我们可以明显的看到，这个粉红色的方块在IE6中，左边的空隙要比IE7和FireFox中要大的多，通过上面的刻度可以知道，整整大了一倍。飞飞Asp技术~乐园也就是说margin-left:100px在IE6中变成了margin-left:200px;的效果。飞飞As!p技术乐园
这就是著名的“float双倍margin bug”了。
哪么到底怎么解决这个问题呢，很简单！
解决方法一：
.floatbox {
float: left;
width: 100px;
height: 100px;
background-color:deeppink;
margin-top: 20px;
margin-left:100px;
display:inline}
解决方法二：
_margin-left:50px;/*只对IE6其作用的CSS hack，对数值减半*/
大功告成，两倍距离就解决了！！！
注意：只有在父块使用了float：left时，父块使用display:inline才能消除.如果子快同时使用了和父块相同的css样式，页面的margin双倍距离是不会消失的
|
