a标签添加边框后有空隙的解决方法

a标签加边框后，他们之间会有空隙请看源代码

<style>
 *{
  margin: 0;
  padding: 0;
 }
 a{
  border: 1px solid #CD1E21;
 }
</style>
<body>
<a href="">dsafasdf</a>
<a href="">dsafasdf</a>
<a href="">dsafasdf</a>
</body>

三个之间因为换行、tab(制表符)、空格，而引起的空隙。不单单只有a标签会这样，当你将标签转化成行内块级元素时，也会出现同样的情况
那该怎样解决呢？(单单只说上面a标签的问题 )有三个方法：

将他们写为一行

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

<style>
 *{
  margin: 0;
  padding: 0;
 }
 a{
  border: 1px solid #CD1E21;
 }
</style>
<body>
<a href="">dsafasdf</a><a href="">dsafasdf</a><a href="">dsafasdf</a>
</body>

将他的父级设置为 font-size ：0px; 给a标签设置font-size : 15px; (a标签字体大小自己设置)

<style>
 *{
  margin: 0;
  padding: 0;
 }
 a{
  border: 1px solid #CD1E21;
  font-size:15px;
 }
 body{
  font-size:0;
 }
</style>
<body>
<a href="">第一个A标签</a>
<a href="">第二个A标签</a>
<a href="">第三个A标签</a>
</body>

直接给他一个 margin-left: -5px; (一切跟据实际情况而定)

<style>
 *{
  margin: 0;
  padding: 0;
 }
 a{
  border: 1px solid #CD1E21;
  margin-left: -5px;
 }
</style>
<body>
<a href="">第一个A标签</a>
<a href="">第二个A标签</a>
<a href="">第三个A标签</a>
</body>

想了解关于更多行内块级元素空隙的解决方法请浏览
https://blog.csdn.net/bigbear00007/article/details/81781127