默认情况下，inline元素之间就有空隙出现，所以结合了inline和block属性的inline-block属性自然也有这个特点。
那这些空隙是什么呢，它们是空白符！
消除空白符
在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。
空白符虽然是浏览器正常的表现行为，但是通常情况下，设计师同学的设计稿不会出现这些空隙，我们在还原设计稿的时候，怎么去除掉这些空隙呢。
要取出空白符产生的间隙，首先要理解空白符归根结底是个字符，通过设置font-size属性可以控制产生的间隙的大小。
首先我们将font-size设置成50px试试，修改CSS代码如下：
CSS Code复制内容到剪贴板
ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px}
li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }
我们修改ul的font-size为50px，而li的font-size为12px保持原来的字体大小，效果如下：
可以看到菜单之间的空隙变大了。
接着我们设置font-site属性为0px，代码如下
CSS Code复制内容到剪贴板
ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px}
li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }
效果如下：
兼容性问题
在IE8+，FF和Chrome的浏览器，inline-block可以完美的兼容，考虑到IE6和IE7等低版本浏览器的占用率，虽然有办法可以兼容，但本文不再赘述，大家有兴趣的可以查找相关资料。
inline-block的应用
inline-block的应用什么场景有哪些呢？我们大家考虑一个技术的应用场景时，首先一定要思考的是技术的特性和需求是否符合。inline-block的特点是结合inline和block两种属性的特定，可以设置width和height，并且元素保持行内排列的特性，基于这一点，所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block的应用场景。下面举例说明：
