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

方式五：将父元素设置为 display: flex;

.container {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    margin: 50px auto;  
    background: linear-gradient(to right, skyblue, #fff);
    display: flex; /*父元素设置 display: flex*/
}
.container div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: pink;
}