css 解决inline-block元素的空白间隙

产生原因：
我们习惯在标签结束处敲一个回车，然而回车会产生回车符，相当于空白符。当多个空白符连续使用时，会合并成一个空白符。

Demo:
html

<ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>

css

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    padding: 10px;
    background: green;
    text-align: center;
}

ul li {
    display: inline-block;
    background: yellow;
}

效果

image.png

可以看到在inline-block元素之间存在4px(Chrome是8px)间隙。

解决办法
1.使用负margin

ul li {
    display: inline-block;
    background: yellow;
    margin-left: -6px;
}

缺点：

在不同浏览器中，空白间隙的大小不同，而且跟父元素的字号有极大关系。

2.改变HTML结构

<ul>
    <li>item1</li><li>item2</li><li>item3</li>
</ul>

缺点：不够灵活

3.设置父元素字体大小为0

ul {
    list-style: none;
    padding: 10px;
    background: green;
    text-align: center;
    font-size: 0;
}

ul li {
    display: inline-block;
    background: yellow;
    font-size: 16px;
}

4.将父元素设置display:table

ul {
    list-style: none;
    padding: 10px;
    background: green;
    text-align: center;
    display: table;
}

ul li {
    display: inline-block;
    background: yellow;
}