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

Question

我有一个用户列表，有两个内联元素：一个 "contact me" 按钮（'a' 元素带有字体图标）和一个显示用户类型的标签（span 元素）。并非所有用户都有标签，只要有标签，'a' 元素就会为图标提供超出其需要的宽度。这是它的样子：

正如你所看到的，底部的合适，而顶部的蓝色 space 在右侧更大。它们具有完全相同的类和属性（这是从循环中生成的，所以它是相同的代码）。

这是 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”选择器），但它们的地图看起来完全一样（在两个元素上使用 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>

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

icon changing width when near inline element

html

css

inline