El espacio entre dos elementos <span> del bloque en línea

Question

Creé dos elementos juntos en html y convertí cada uno en un bloque en línea. Descubrí que siempre había una brecha entre estos dos elementos, pero en realidad no establecí ningún atributo de relleno/margen para ellos. ¿Podría alguien decirme por qué y cómo puedo solucionar este problema?

Answer 1

CSS:

span { 
    display: inline-block; 
} 

HTML:

<span>This will have</span> 
<span>a gap between the elements</span> 

<span>This won't have</span><span>a gap between the elements</span> 

Answer 2

Este es un comportamiento extraño, que puede corregirse, cambió el marcado a algo como esto.

<div class="inline"> 
    first 
</div><div class="inline"> 
    second 
</div> 

No ponga ningún espacio, cuando defina otro elemento en línea.

Answer 3

cuando se utiliza inline-blocks, para eliminar el margen solo se aplica word-spacing: -3px; y letter-spacing: -3px; al contenedor padre y luego revertir estas normas sobre inline- elementos de bloque con word-spacing: normal; y letter-spacing: normal;

p. Ej. con este marcado básica

<div> 
    <span>...</span> 
    <span>...</span> 
    <span>...</span> 
</div> 

el código CSS mínima es

div { 
    word-spacing: -3px; 
    letter-spacing: -3px; 
} 

span { 
    word-spacing: normal; 
    letter-spacing: normal; 
    display: inline-block; 
} 

Otra posibilidad (que no recomiendo, pero podría útil para usted saber, de todos modos) es establecer font-size: 0; a los padres envase.

Answer 4

Puede eliminar espacios en blanco y mantener un buen formato de código utilizando comentarios HTML.

<span>1</span><!-- 
--><span>2</span><!-- 
--><span>3</span>