包裹在 div 中的 span 元素之间不需要的空格答案

【问题标题】：Unwanted spaces between span elements wrapped in divs包裹在 div 中的 span 元素之间不需要的空格
【发布时间】：2021-11-16 11:48:23
【问题描述】：

span { background: green; }

<div><span> Hello World      </span></div>
<div><span> Foo bared        </span></div>
<div><span> Ariovistus Dummy </span></div>

span 元素之间几乎没有多余的空格。我想用 CSS 删除它们，但我该怎么做呢？

经过一番检查，我发现div 的某些内容比span 的高度更高。

let printHeight = tag => console.log(`The height of ${tag}: ${document.getElementsByTagName(tag)[0].getBoundingClientRect().height}px.`)

printHeight('div');
printHeight('span');

<div>Hello World</div>
<span>Hello World</span>

这可能是空格的原因。但这是为什么呢？以及如何去除空格？

【问题讨论】：

标签： javascript html css height spaces

【解决方案1】：

span {
  background: green;
  display: inline-block;
}

<div><span> Hello World      </span></div>
<div><span> Foo bared        </span></div>
<div><span> Ariovistus Dummy </span></div>

已编辑！

【讨论】：

在原始项目中，我在divs 中有其他内容以及spans，所以我不能完全放弃divs。有什么办法可以将divs 保留在原位？
如果你想要的话，它也可以使用相同的 html
包含spans 的divs 是有目的的，所以我无法删除它们。在您的回答中，您删除了我无法做到的divs。也许可以解决这个问题？
编辑了我的答案