Il divario tra due blocchi in linea <span> elemento

Question

Ho creato due elementi insieme in html e reso ciascuno un blocco in linea. Ho scoperto che c'era sempre un divario tra questi due elementi, ma in realtà non ho impostato alcun attributo padding/margine per loro. Qualcuno potrebbe dirmi perché e come posso risolvere questo gap?

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

Questo è un comportamento strano, che può essere risolto, modificato il markup in qualcosa di simile.

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

Non inserire spazi quando si definisce un altro elemento in linea.

Answer 3

quando si utilizza inline-blocks, per rimuovere il margine basta applicare word-spacing: -3px; e letter-spacing: -3px; al contenitore genitore e quindi ripristinare queste norme in materia di inline- elementi di blocco con word-spacing: normal; e letter-spacing: normal;

ad es. con questo markup di base

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

il codice CSS minima è

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

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

Un'altra possibilità (che io non consiglio ma potrebbe utile per voi di conoscere, in ogni caso) è quello di impostare font-size: 0; al genitore contenitore.

Answer 4

È possibile rimuovere gli spazi bianchi e mantenere una buona formattazione del codice utilizzando i commenti HTML.

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