解决 inline-block 的左右缝隙问题

  当元素是非块级元素（span，a等，或者display: inline;(display: inline-block)）时，元素在一行内排列，会有左右缝隙的问题。
html代码

    <div class="ct">
        <span>tag1</span>
        <span>tag2</span>
        <span>tag2</span>
    </div>

CSS 代码

    .ct{
        border: 1px solid #000;
    }
    span{
        background-color: red;
    }

解决方法是：

• 1.把html代码放在一行内

    <div class="ct">
        <span>tag1</span><span>tag2</span><span>tag2</span>
    </div>

• 2.利用负margin: -4px;（一般来说是-4px）

    .ct{
        border: 1px solid #000;
        padding-left: 4px;
    }
    span{
        background-color: red;
        margin-left: -4px;
    }

• 3.利用float 和 BFC

    .ct{
        border: 1px solid #000;
        overflow: hidden;/*形成BFC*/
    }
    span{
        background-color: red;
        float: left;
    }

• 4.父元素的 font-size: 0;再直接设置子元素的

    .ct{
        border: 1px solid #000;
        font-size: 0;
    }
    span{
        background-color: red;
        font-size: 16px;
    }