消除display:inline-block产生的间隔问题

01.png

产生的原因：标签段之间的空格

1.方法：去掉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>

或者是

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

总之就是要把前一个标签的结尾标签和紧挨着的开始标签不能有空格，要么挨着，要么填充
2.方法：使用margin负值

 .space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
    margin-right: -5px;
    }

3.方法：去掉闭合标签，为了向IE6以下的浏览器兼容，最后一个结束标签不能丢

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

4.给父元素添加font-size:0;同时要给a标签添加font-size大小，不然不会出现

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

5.letter-spacing

.space {
    letter-spacing: -5px;
}
.space a {
    letter-spacing: 0;
}

6.word-spacing

.space {
    word-spacing: -5px;
}
.space a {
    word-spacing: 0;
}

7.浮动

 .space a {
        display: inline-block;
        float: left;
        padding: .5em 1em;
        background-color: #cad5eb;
        }