a标签的空白间隙问题

今天在看到这个问题，感觉挺有意思，记录一下。

问题的根源在于使用a标签这样的inline 或者inline-block的元素时，我们在编辑docment的时候为了代码的阅读性会使用到换行符，浏览器解析的时候会认为是很多个空格，因此解析成一个空格，因此a标签之间就会有一个空白的区域。
下面是解决办法：
谢谢whhlu的回答

display：inline-block的元素之间会有一个字符的间隙，这个间隙导致了最后一个会掉下来。

解决方法：
1、给父元素设置font-size：0px；(最常用)
2、取消掉换行符，如这样：
<span>some text</span><span>some text</span><span>some text</span>

3、使用margin负值。
4、使用浮动。
5、另外还有使用letter-spacing、word-spacing等方法。
6、注释换行符，如下图

 <div class="space">
     <a href="##">惆怅</a><!--
     --><a href="##">淡定</a><!--
     --><a href="##">热血</a> </div>
 
 <div class="space">
     <a href="##">惆怅</a
     ><a href="##">淡定</a
     ><a href="##">热血</a> </div>