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

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

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

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

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

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

 1 <div class="pageNormal">
 2     <span class="pagePre">&lt;</span>
 3     <span class="currentPage">1</span>
 4     <a href="#">2</a>
 5     <a href="#">3</a>
 6     <a href="#">4</a>
 7     ...
 8     <a href="#">28</a>
 9     <a href="#">29</a>
10     <a href="#">30</a>
11     <a href="#">&gt;</a>
12 </div>

折合成下面这样

1 <div class="pageNormal">
2     <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>
3 </div>

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

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

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

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

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

转载于:https://www.cnblogs.com/love-family/p/4432144.html