li上设定样式display:inline-block时左边出现莫名空格以及其解决方法

如题，为了使li水平展示，在不使用浮动的情况下，给li添加display:inline-block样式时，除了第一个li外，其后li均会出现左侧有莫名大约8px宽的空格的问题，代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style>
 7         body, ul {
 8             padding: 0;
 9             margin: 0;
10         }
11         .item {
12             display: inline-block;
13             border: 1px solid #000;
14             padding: 5px;
15         }
16     </style>
17 </head>
18 <body>
19     <div>
20         <ul>
21             <li class="item">1</li>
22             <li class="item">2</li>
23             <li class="item">3</li>
24             <li class="item">4</li>
25             <li class="item">5</li>
26         </ul>
27     </div>
28 </body>
29 </html>

在chrome，Firefox，IE8~IE11上均有此现象，

解决方法，可在ul上设置样式为font-size: 0，在li上设置合适的font-size即可；

同理，在多个img并排时，也同样会出现有缝隙的问题，解决方案同上