行内元素之间出现间隙的bug解决

　　在平时写代码的时候，不免会遇到写多个行内元素【如：a,span等】的时候，元素间会产生间隙的bug问题。

　　产生的原因：一般都是在Html中有换行符、tab(制表符)、空格等造成空隙的产生。

　　解决的办法我总结了两个，如下。

　　方法一：将元素写成一行，中间不换行；

　　将本来这样罗列清晰的代码

<div class="pageNormal">
    <span class="pagePre">&lt;</span>
    <span class="currentPage">1</span>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    ...
    <a href="#">28</a>
    <a href="#">29</a>
    <a href="#">30</a>
    <a href="#">&gt;</a>
</div>

折合成下面这样

<div class="pageNormal">
    <span class="pagePre">&lt;</span><span class="currentPage">1</span><a href="#">2</a><a href="#">3</a><a href="#">4</a>...<a href="#">29</a><a href="#">30</a><a href="#">&gt;</a>
</div>

虽然轻松解决了问题，但是代码看上去杂乱无章，不便于后期的改善维护，所以不推荐。

方法二：设置font-size:0;

.pageNormal{font-size:0;}
.pageNormal a,.currentPage,.pagePre{font-size:14px;}

注：主容器设置font-size:0，那么内联标签的内容都显示不出来了，此时只需将内联标签的元素设置一下大小即可。

当然，除了上述方法，还有让内联元素浮动【我试的是float：left;】的办法，此时父级容器需要设置宽高，才好定位内联元素的位置。感兴趣的朋友可以一试。