span { background: green; } <div><span> Hello World </span></div> <div><span> Foo bared </span></div> <div><span> Ariovistus Dummy </span></div>Hay pequeños espacios no deseados entre los elementos del tramo. Quiero eliminarlos con CSS, pero ¿cómo lo hago?
Bueno, después de una inspección, descubrí que div con algún contenido tiene más altura que span con el mismo contenido.
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>Y probablemente esa sea la razón de los espacios. Pero ¿por qué es eso? ¿Y cómo quitar los espacios?
span { background: green; display: inline-block; } <div><span> Hello World </span></div> <div><span> Foo bared </span></div> <div><span> Ariovistus Dummy </span></div>Editado!