另辟途径去除inline-block元素间间距

1.实现效果

   

  2.刚开始布局

    

<ul>
    <li></li>
</ul>

css 只写关键样式

ul{font-size:0}
li{display:inline-block;line-height:50px}

    纯文字是可以自己实现垂直居中

3.间隙产生

 当我加入图片，这个li上边有间隙，而且高度也不是50，其他li标签底部有间隙。

4.不想使用负边距解决，最后发现可以这样布局：

<ul>
 <li>
    <img src="" alt=""/>
    <span></span>
</li>
</ul>

不设置li标签高度，直接设置span的高度。

ul{ font-size:0;}

li{position:relative;display:inline-block;font-size:16px; color:#fff; padding:0 20px;}

img{display:inline-block;ertical-align: middle;width:20px;height:20px;}

span:{display:inline-block;vertical-align: middle;line-height:50px;}