saber 酱的抱枕

css的display: inline-block是替代浮动（float）的一个好办法。inline-block布局不会有float的一些缺点：脱离文档流、破坏inline box（具体来讲就是float的元素要等高，否则下面的float元素会被上面的卡住）。inline-block不会脱离文档流，元素高度不同也不会卡住。但是inline-block的元素之间会有空隙。

如下代码：

<div id="a"></div>
<div id="b"></div>
<style>
	#a,#b{width: 100px;height: 150px;display: inline-block;}
	#a{background: #0c0;}
	#b{background: #0ff;}
</style>

两个div都是inline-block布局，默认会有空隙：

（IE8的空隙还比其他浏览器少了1px）

那怎么办呢？有两个解决办法：

1.使两个元素的代码之间没有空隙。如上例，则时两个div的代码挨在一起，中间不要换行。这样就没有空隙了。

2.给应用了inline-block布局的元素的父元素添加css属性：font-size: 0; 这样就OK了。

以上两个方法都兼容所有浏览器。

ps：以前chrome不吃font-size: 0;这一套，不过较新版本的chrome也支持了。

解决display: inline-block;的间隙问题