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

Question

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>

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

Answer 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>

已编辑！

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

Unwanted spaces between span elements wrapped in divs

html

javascript

css

height

spaces