本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。

基础知识

display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

举例说明：以前我们做横向菜单列表的时候，我们可以通过li和float:left两者来实现，现在可以通过li和display:inline-block。

HTML代码：

CSS代码

效果图

可以看到li元素可以横向排列，并且可以设置width属性，大家可以复制代码自己查看效果或查看Demo

inline-block的问题

观察上面的例子，细心的同学肯定会发现，每个li之间有一个小空隙，而我们的代码中并没有设置margin等相关属性，这是为什么呢？

默认的inline元素

首先，我们观察一下默认的inline元素的表现：

HTML代码

CSS代码

效果图

默认情况下，inline元素之间就有空隙出现，所以结合了inline和block属性的inline-block属性自然也有这个特点。
那这些空隙是什么呢，它们是空白符！

消除空白符

在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。

空白符虽然是浏览器正常的表现行为，但是通常情况下，设计师同学的设计稿不会出现这些空隙，我们在还原设计稿的时候，怎么去除掉这些空隙呢。
要去除空白符产生的间隙，首先要理解空白符归根结底是个字符，通过设置font-size属性可以控制产生的间隙的大小。
首先我们将font-size设置成50px试试，修改CSS代码如下：

我们修改ul的font-size为50px，而li的font-size为12px保持原来的字体大小，效果如下：

可以看到菜单之间的空隙变大了。
接着我们设置font-site属性为0px，代码如下

效果如下：

可以看到菜单之间的空隙没有了，大家可以自行查看Demo

兼容性问题

在IE8+，FF和Chrome的浏览器，inline-block可以完美的兼容，考虑到IE6和IE7等低版本浏览器的占用率，虽然有办法可以兼容，但本文不再赘述，大 e-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

举例说明：以前我们做横向菜单列表的时候，我们可以通过li和float:left两者来实现，现在可以通过li和display:inline-block。

HTML代码：

CSS代码

效果图

可以看到li元素可以横向排列，并且可以设置width属性，大家可以复制代码自己查看效果或查看Demo

inline-block的问题

观察上面的例子，细心的同学肯定会发现，每个li之间有一个小空隙，而我们的代码中并没有设置margin等相关属性，这是为什么呢？

默认的inline元素

首先，我们观察一下默认的inline元素的表现：

HTML代码

CSS代码

效果图

默认情况下，inline元素之间就有空隙出现，所以结合了inline和block属性的inline-block属性自然也有这个特点。
那这些空隙是什么呢，它们是空白符！

消除空白符

在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。

空白符虽然是浏览器正常的表现行为，但是通常情况下，设计师同学的设计稿不会出现这些空隙，我们在还原设计稿的时候，怎么去除掉这些空隙呢。
要去除空白符产生的间隙，首先要理解空白符归根结底是个字符，通过设置font-size属性可以控制产生的间隙的大小。
首先我们将font-size设置成50px试试，修改CSS代码如下：

我们修改ul的font-size为50px，而li的font-size为12px保持原来的字体大小，效果如下：

可以看到菜单之间的空隙变大了。
接着我们设置font-site属性为0px，代码如下

效果如下：

可以看到菜单之间的空隙没有了，大家可以自行查看