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