html - 靠近内联元素时图标改变宽度

Question

我有一个用户列表，包含两个内联元素:一个“联系我”按钮(带有字体图标的“a”元素)和一个显示用户类型的标签(span 元素)。并非所有用户都有标签，只要有标签，'a' 元素就会为图标提供比其需要更多的宽度。这是它的样子:

正如你所看到的，底部的正确匹配，而顶部的蓝色空间在右边更大。它们具有完全相同的类和属性(这是从循环中生成的，因此是相同的代码)。

这是 link+span 的 HTML 代码:

.item-title {
  margin-bottom: 10px;
}

.item-btn-contact {
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 5px;
    background-color: #1b95e0;
    font-size: 80%;
    color: #fff;
    text-decoration: none;
}

.item-type-tag {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    background-color: #dedede;
    font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">

  <a href="">xxxx</a>
  
  <a href="" class="item-btn-contact" title="Contattami">
    <i class="fas fa-envelope"></i>
  </a>
					
  <span class="item-type-tag">Allenatore</span>
										
</div>
<div class="item-title">

  <a href="">xxxx</a>
  
  <a href="" class="item-btn-contact" title="Contattami">
    <i class="fas fa-envelope"></i>
  </a>
										
</div>

我尝试通过 javascript 检查两个元素的计算样式是否有任何差异(也许某处有一个“:last-child”选择器)，但它们的 map 看起来完全一样(在两个元素上使用 getComputedStyle 检查).

每当我将 span 元素的显示属性更改为 block、flex 或其他非内联选项时，其他元素都会以正确的方式自行调整大小。

我找到的唯一选择是将图标宽度更改为 .8em(目前为 1em)，然后添加一个 last-child 选择器以在右侧没有 span 时将其正确调整为 1em，但这不是真实的解决方案...

谁能帮我找出原因，或者至少是如何解决它？

Answer 1

将 item-btn-contact 上的显示设置为 inline-block。似乎 a(inline)的默认显示与大小调整不一致。

.item-title {
  margin-bottom: 10px;
}

.item-btn-contact {
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 5px;
    background-color: #1b95e0;
    font-size: 80%;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

.item-type-tag {
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 5px;
    background-color: #dedede;
    font-weight: bold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">

  <a href="">xxxx</a>
  
  <a href="" class="item-btn-contact" title="Contattami">
    <i class="fas fa-envelope"></i>
  </a>
					
  <span class="item-type-tag">Allenatore</span>
										
</div>
<div class="item-title">

  <a href="">xxxx</a>
  
  <a href="" class="item-btn-contact" title="Contattami">
    <i class="fas fa-envelope"></i>
  </a>
										
</div>