<body>
<ul class="box">
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</body>
.box{
border:1px solid #ccc;
padding-left: 4px;
}
.box>li{
display: inline-block;
background-color: red;
padding: 5px;
font-size: 16px;
}
元素被当成行内元素排版时，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
1、去除标签之间的空格和回车
<body>
<ul class="box">
<li>123
</li><li>456
</li><li>789</li>
</ul>
</body>
或者
<body>
<ul class="box">
<li>123</li
><li>456</li
><li>789</li>
</ul>
</body>
或
<body>
<ul class="box">
<li>123</li><!--
--><li>456</li><!--
--><li>789</li>
</ul>
</body>
2、使用负边距
缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。
3、给父级元素设置font-size:0，子元素根据实际情况使用font-size
.box{
border:1px solid #ccc;
padding-left: 4px;
font-size: 0;
}
.box>li{
display: inline-block;
background-color: red;
padding: 5px;
font-size: 16px;
}
缺点：inline-block元素必须设定字体，不然行内元素中的字体不不显示