我有一个用户列表，其中包含两个内联元素：一个“与我联系”按钮（带有字体效果图标的“ a”元素）和一个显示用户类型的标签（span元素）。 并非所有用户都具有标签，并且只要有标签，“ a”元素就会为图标提供超出其所需宽度的宽度。看起来像这样：
如您所见，底部的正确放置，而顶部的蓝色空间在右侧更大。它们具有完全相同的类和属性（这是从循环生成的，因此是相同的代码）。
这是链接+跨度的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元素的display属性更改为block，flex或其他非内联选项时，另一个元素都会以正确的方式调整其大小。
我发现的唯一选择是将图标宽度更改为.8em（当前为1em），然后添加最后一个子选择器，以在右侧没有跨度时将其正确调整为1em，但这不是真正的选择。解决方案...
任何人都可以帮助我找出原因，或者至少如何解决吗？