去除inline-block之间间隔的方法

inline-block之间出现间隔的主要原因是因为标签之间的空格，这是符合规范的应有表现，并不是浏览器bug，解决方法有以下几种：

1.去掉html标签间的空格

<div class="show">
        <span style="height:10px"></span
        ><span style="height:20px"></span
        ><span style="height:30px"></span>
    </div>

或借助html注释

<div class="show">
        <span style="height:10px"></span><!--
        --><span style="height:20px"></span><!--
        --><span style="height:30px"></span>
    </div>

2.使用margin负值

margin-right: -8px;
设置的负值与上下文字体类型，字体大小有关，且不同浏览器不同，不适合大规模采用

3.使用font-size：0

但这种方法也会使上下元素间隔消失

4.使用letter-spacing： -999px

当负值达到很大时，兼容性的差异可以忽略，即使负值很大，也不会发生重叠

5.使用word-spacing： -999px

.show{
    word-spacing: -9999px;
    display: inline-table;
}

原理同上，为了兼容chorme，需要加上display: inline-block

6.改为使用浮动布局，或者是flex布局，都可以消除inline-block之间的间隔