消除a标签连接之间间距缝隙的方法

自己写的几个a标签，它们之间并没有设置样式，但是显示 的效果确实a标签之间有缝隙、有间距，无论我们怎么调都不能解决。

    很多网站编程人员都有可能遇到过这样的问题，就是自己写的几个a标签，它们之间并没有设置样式，但是显示的效果确实a标签之间有缝隙、有间距，无论我们怎么调都不能解决。
    出现这种情况的原因是很多编程人员为了代码结构整齐，看起来有层次感以及方便以后修改查看，人为的让几个a标签之间换行，换行就产生了一堆的空间，在浏览器里就显示有间隙了。遇到这种情况，一般有下面几种解决办法：

　　第一种解决办法：

　　 改变超链接书写方式比如我们原来书写的代码是这样：

<a href="##">首页<a/>
<a href="##">段子<a/>
<a href="##">图片<a/>

 

     我们把它改成这个样子：
     <a href="##">首页<a/><a href="##">段子<a/><a href="##">图片<a/>
     标签中间不要换行，a标签一个挨着一个书写，直到它们自动换行，这样问题就解决了。

 

　　  第二种解决办法：给外层div加属性限制

　　 另一个解决办法就是给a标签外层div设置margin-left:-8px即可解决，-8不是个特定值，具体多大根据每个人的情况来定，这样设置的好处就是即使负值设置的足够大，a标签之间也不会发生重叠，这是非常好的，这个负值可以稍微大点。

 

　　第三种解决办法：给外层div设置字符间距和单词间距

    假设a标签外层div的ID是nav，就可以通过使用下面两种css中的一种，或两种同时使用来解决这一问题。
    设置字符间距的css样式，为负值哦
    

#nav{
    letter-spacing:-3px;
}
#nav a{
    letter-spacing:0;
}
   // 设置单词间距的css样式，为负值哦
#nav{
    word-spacing:-6px;
}
#nav a{
    word-spacing:0;
}

    以上三种解决方法是大家常用到的，大家可以参考一下解决自己的问题，如果有更好的解决办法大家可以留言一起讨论。

转载于:https://www.cnblogs.com/web1/articles/7063940.html