Search code examples
javascripthtmlcssheightspaces

Unwanted spaces between span elements wrapped in divs

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?

Solution 

  • 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!