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