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;

}

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