解决display:inline-block;行内块元素出现空白空隙问题

    ul li关于display:inline-block行内块元素中间有空白间隔解决办法

    今天在仿一个国外站做一个专题页面时，在写网站主题的导航模块时，使用了行内块元素：display:inline-block;

    发现这样操作：每一个li之间会出现相等间距，使用浏览器开发者模式工具也找不到原因所在。

    具体情况贴图如下：

    具体是什么原因造成的呢？两处使用display:inline-block;行内块元素都是出现这种情况，上图中加了边框之后看的更明白,之前写这种行内块都是使用float:left;这种浮动做出来，后来发现了display:inline-block；发现这个比float:left;更简便，但是现在出现了空隙应该如何解决？由于要求下午必须把仿的一个页面做出来一个大概，直接百度的答案，至于为何出现这种情况，大致看了一下是因为连续多个空白符（空格，换行符，回车符等）引起的，至于如何解决display:inline-block;行内块元素出现空白空隙问题，答案就是：给他的父元素加：font-size:0px;,

    按照这样的话，我给ul 加：font-size:0; 我li 里面的文字不就都为0了吗？ so!你可以在给li加一个font-size，更方便全局生效，可以实现在一个全局共用CSS文件加:

    ul { font-size:0px;}

    li { font-size:12px;}

    一次设置全局受益。