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”的空白：

解決辦法

設(shè)置父元素的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/