span { background: green; }<div><span> Hello World </span></div>
<div><span> Foo bared </span></div>
<div><span> Ariovistus Dummy </span></div>There are little unwanted spaces between the span elements. I want to remove them with CSS, but how do I do it?
Well after some inspection I found that div with some content has more height than span with the same content.
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>And probably that is the reason for the spaces. But why is that? And how to remove the spaces?
span {
background: green;
display: inline-block;
}<div><span> Hello World </span></div>
<div><span> Foo bared </span></div>
<div><span> Ariovistus Dummy </span></div>Edited!