去除inline-block元素间间距的解决方法

HTML Markup

  
 
item1
  
 
item2
  
 
item3
  
 
item4
  
 
item5

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/