a标签默认是行内元素，而行内元素之间的回车键、多个空格、多个制表符（tab）等均会按一个空格来处理，这样的话，如果相邻的两个a标签不在同一行（换句话说它们之间有回车换行符），则显示在页面的时候它们之间就会出现一个空格的间隙。
因此，要想解决这个问题，最好也是最简单的办法，就是把它们写在同一行且互相之间不留任何字符（包括空格），比如：
<a href="...">链接1</a><a href="...">链接2</a><a href="...">链接3</a>如果既要把它们写在不同的行，又不想有空隙，可以把a标签改为块级元素。但是要想让块级的a标签仍然排在同一行就要多费一番手脚了，比如通过浮动（浮动时a标签会自动变为块级元素）：
<style>a {float:left}
</style>
<a href="...">链接1</a>
<a href="...">链接2</a>
<a href="...">链接3</a>
<br style="clear:both"/>
此外还可以利用CSS3的弹性盒子flex来实现，这个就不多说了。
这是因为你把li设置成行内元素了，行内元素之间是会有一定间隙的，间隙的大小与默认的font-size设置有关，这个值越大，间隙也越大，如果你在ul层设置font-size=0，那么间隙即可去掉，但是如果ul有字体的话，也看不见了，li里面的字体可以另外设置大小。还有一种办法就是连着写代码：
<ul><li>
</li>
</ul>
这样的写法改成
<ul><li></li></ul>或者
<ul><
li><
/li></ul>
为什么写在一行之后空隙会不见了呢？我认为原因是浏览器会解析HTML代码中行内元素之间的换行符，当行内元素之间没有换行符之后，间隙自然就没了。
原因是display:inline-block属性产生的间隙。display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。
方案一：给元素设置float:left,缺点高度塌陷，要清除浮动。（推荐）
li{display:inline-blockpadding:5pxbackground-color:#ff6float:left}
.clr:after{clear:bothdisplay:blockoverflow:hiddenheight:0content:"."}
.clr{zoom:1}
<ul class="clr">
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">XML</a></li>
</ul>
方案二：设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，如果font-szie：16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。
方案三：设置父元素 display:tableword-spacing:-1em目前这个方法可以完美解决，且兼容其他浏览器。
