宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取

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>

a标签添加边框后有空隙的解决方法-风君雪科技博客

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

  1. 将他们写为一行

我们把它改成这个样子:
<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>
  1. 将他的父级设置为 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>
  1. 直接给他一个 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