去除 inline-block 之间的间距

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

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

比如图上面红箭头所指示的地方

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

//css样式
.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}
//html
<div class="space">
    <a href="##">111</a>
    <a href="##">222</a>
    <a href="##">333</a>
</div>

还是有间距，下面介绍几种消除间距的方法：

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。

考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="space">
    <a href="##">
    111</a><a href="##">
    222</a><a href="##">
    333</a>
</div>

这样

<div class="space">
    <a href="##">111</a
    ><a href="##">222</a
    ><a href="##">333</a>
</div>

或者这样借助 html 的注释

<div class="space">
    <a href="##">111</a><!--
    --><a href="##">222</a><!--
    --><a href="##">333</a>
</div>

或者通过 margin 设置负值来消除

.space a {
    display: inline-block;
    margin-right: -3px;
}