Come posso rimuovere lo spazio tra due elementi inline-block?

Disporre due elementi HTML uno di fianco all’altro è un risultato che si può ottenere in molti modi diversi. Utilizzando display:inline-block il browser interpone tra gli elementi uno spazio quasi mai desiderato. Vediamo come eliminarlo.

Ho scritto il seguente codice HTML:

<section>
    <div> Foo </div>
    <div> Bar </div>
</section>

E gli ho associato questo codice CSS:

div {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

Il codice e il relativo risultato sono visibili qui di seguito:

Quello che viene fuori è un odioso spazio tra i due elementi div.
Come faccio ad eliminarlo?

La soluzione

È possibile risolvere questo problema in diversi modi.
Un modo è quello di utilizzare solo codice CSS.
In tal caso bisogna aggiungere il codice font-size: 0 all’elemento genitore e dichiarare un altro font-size sui figli, come mostrato dal seguente codice.

section {
  font-size: 0;
}
div {
    display:inline-block;
    font-size: 16px;
    width:100px;
    background-color:palevioletred;
}

Ecco la modifica in tempo reale.

Un’altra soluzione, con solo codice CSS, è quella di spostare il margine del secondo div di 4 pixel a sinistra, come mostrato dal seguente codice.

Un’ultima soluzione a tale problema è quella di modificare il codice HTML facendo in modo di NON separare i due div dal carattere di invio.
Sì, si, proprio così. Scrivendo i due div sulla stessa riga HTML, il problema magicamente non si presenta.

<p>
    <div>Foo</div><div>Bar</div>
</p>

È facile. È semplice. Funziona ovunque. È la soluzione pragmatica. Ed eccolo in azione:

Ti è stato utile questo articolo?
Si? Ottimo!
Allora potrebbe esserlo anche per qualcun altro col tuo stesso problema.
Condividilo! 😉

Hai letto questi articoli?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *