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

现象描述

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

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

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

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
    text-decoration: none;
}

<div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

这种表现是符合规范的应该有的表现（并不是bug），不过这类间距有时会对我们布局，或是兼容性处理产生影响，所以需要想办法去掉它，以下示例几种方法：

实现方法

移除空格

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉 HTML 中的空格，间距自然就没有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

或者是：

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

或者是借助 HTML 注释：

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

让闭合标签吃胶囊

在 HTML5 中，我们直接：

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

好吧，虽然感觉上有点怪怪的，但是，这是OK的。

使用 font-size: 0

类似下面的代码：

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

这个方法，基本上可以解决大部分浏览器下 inline-block 元素之间的间距（IE7等浏览器有时候会有1像素的间距）。

参考文章：去除inline-block元素间间距的N种方法

版权声明

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议 ，转载请注明出处！