HTML Markup
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
CSS Code
*{
margin: 0;
padding: 0;
}
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
}
ul li {
display: inline-block;
* display: inline;
zoom: 1;
background: orange;
padding: 5px;
}
上面的demo效果，明显的可以看出，在inline-block的元素之间存在“4px”的空白：
解决办法
设置父元素的font-size: 0;，如下：
ul {
font-size: 0;
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
}
参考：
https://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements
http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%e5%8e%bb%e9%99%a4%e9%97%b4%e8%b7%9d/
