我在使用FlexBox和gap属性时遇到意外行为.令我惊讶的是，当我通过删除元素并将其添加回来来"刷新"DOM时，一切都按预期工作.这让我相信，第一个油漆不知何故出了问题，当我"强制重新加载"时，它会自动修复.
问题在于一个简单的inline-flex元素，它包含内联单词和前两个单词之间的绝对位置跨度.gap应用于前两个单词之间，但我不应该这样做，因为它们不是实际的块子元素.如果没有跨度，则不会创建间隙.
下面的GIF最好地展示了这种奇怪的行为.这是怎么回事，有什么办法可以解决吗？
超文本标记语言
<div>
Left <span class="show-for-sr">sr label </span>Right with SR label
</div>
<br>
<div>
Left Right without SR label
</div>
CSS
.show-for-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
div {
position: relative;
display: inline-flex;
align-items: center;
gap: 3.5em;
}