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