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

2018-06-22 695 浏览 6 点赞

1.移除空格

<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>

或者注释：

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

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

如下处理：

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

注意，为了向下兼容IE6/IE7等喝蒙牛长大的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。

在HTML5中，我们直接：

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

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

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