去除inline-block元素间间距的N种方法

inline-block是一个块状行盒，表现为一个行内元素，它既拥有了块状元素可以设置width和height的特性，又保留了行内元素不换行的特点。
应用了display:line-block属性的元素会生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子，其表现更像是一个被替换的元素。

真正意义上inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，上代码：

    <input />
    <input type="submit" />

使用CSS更改非inline-block水平元素为inline-block水平也会有该问题：

<style>
        a {            background: pink;            display: inline-block;            padding: .5em 1em;
        }</style><div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a></div>

以上情况是符合规范的应有表现，但这类间距有时会对我们的布局或兼容性产生影响，所以要想办法去掉它，以下示例几种方法～

1. 移除空格

元素间留白间距的出现原因即标签段间的空格，去掉空格间距自然没有了。
以下是几种写法：

    <div>
        <a href="">
        链接1</a><a href="">
        链接2</a><a href="">
        链接3</a><a href="">
        链接4</a>
    </div>

    <div>
        <a href="">链接1</a
        ><a href="">链接2</a
        ><a href="">链接3</a
        ><a href="">链接4</a>
    </div>

    <div>        <a href="">链接1</a><!--
        --><a href="">链接2</a><!--
        --><a href="">链接3</a><!--
        --><a href="">链接4</a>
    </div>

三种写法都能达到去除缝隙的效果：

2. 使用margin负值

margin负值的大小与上下文字体和文字大小有关，由于外部环境的不确定性及最后一个元素多出的父margin值等问题，此方法不适合大规模使用。

<style>
        a {            background: pink;            display: inline-block; 
            padding: .5em 1em;            margin: -3px;
        }</style><body>
    <div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
    </div></body>

3. 删掉闭合标签

HTML5中可以很任性：虽然这样很怪但确实有效。

    <div>
        <a href="">链接1        <a href="">链接2        <a href="">链接3        <a href="">链接4      
    </div>

4. 使用font-size:0

<style>
        div{            font-size: 0;
        }        a{            font-size: 16px;            background: pink;
        }</style><div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a></div>

5. 使用letter-spacing

<style>
        div{            letter-spacing: -6px;
        }        a{            letter-spacing: 0;            background: pink;
        }</style><div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a></div>

6. 使用word-spacing

<style>
        div{            word-spacing: -6px;
        }        a{            word-spacing: 0;            background: pink;
        }</style><div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a></div>