CSS：去除行内/行内块元素默认空隙的四种方式

几个连续的行内（inline）或行内块（inline-block）元素【span，i，img等标签，或标签被设置为display: inline/inline-block;】，有时会有默认的间隙。效果如下:

 原因：标签之间的空格、回车、换行造成的。

下面给出几种解决方式。

方式一：标签连写

<div class="box">
    <span>1</span><span>2</span><span>3</span><span>4</span>
</div>

方式二：巧用注释标签<!---->

<div class="box">
    <span>1</span><!--
    --><span>2</span><!--
    --><span>3</span><!--
    --><span>4</span>
</div>

方式三：父元素font-size:0，注意行内/行内块元素需同步设置font-size。

.box {
    font-size: 0;
}
.box span {
    padding: 0 20px;
    background: #655;
    font-size: 40px;
    color: #fff;
}

方式四：浮动，注意清除浮动操作。

.box {
    overflow: hidden;
}
.box span {
    float: left;
    padding: 0 20px;
    background: #655;
    font-size: 40px;
    color: #fff;
}

方式一和方式二最为简单，方式三和方式四有使用注意事项。用哪种方式，看个人选择。

The end.