Eliminare lo spazio tra gli elementi in display inline-block

Accostando gli elementi html tramite css si viene a creare un piccolo spazio che li divide. Vediamo come risolverlo.
Eliminare lo spazio tra gli elementi in display inline-block

Cosi non ci piace!

A chi non è mai capitato almeno una volta di affiancare elementi con la proprietà display:inline-block!? Questo metodo ha però un piccolo difetto, accostando gli elementi html tramite css si viene a creare un piccolo spazio che li divide. Vediamo di cosa si tratta.

Codice html e css

nav a{ 
    display:inline-block; 
    padding:5px; 
    background:green; 
    color:#fff;
    font-size:17px;
}

<nav>
  <a href="#"> Home </a> 
  <a href="#"> Chi siamo </a>
  <a href="#"> Servizi </a> 
  <a href="#"> Dove siamo </a>
  <a href="#"> Contatti </a> 
</nav>

Ecco il risultato con gli spazi

Con questo codice html e css si ottiene il risultato nell’immagine seguente. Si può notare perfettamente lo spazio che si crea tra la serie di link.
spazio tra elementi blocco inline

Rimuovere gli spazi

Nel momento in cui non è possibile flottare gli elementi, conosco personalmente quattro metodi per rimuovere gli spazi:

Affiancamento

Disporre gli elementi html in modo affiancato.

<nav>
  <a href="#"> Home </a><a href="#"> Chi siamo </a><a href="#"> Servizi </a><a href="#"> Dove siamo </a><a href="#"> Contatti </a> 
</nav>

Commenti

Scrivere gli elementi in cascata intervallati da commenti html.

<nav>
  <a href="#"> Home </a><!--
  --><a href="#"> Chi siamo </a><!--
  --><a href="#"> Servizi </a><!--
  --><a href="#"> Dove siamo </a><!--
  --><a href="#"> Contatti </a> 
</nav>

Margine negativo

Settare il margine destro di ogni elemento a -4px.

nav a{ 
    display:inline-block; 
    padding:5px; 
    background:green; 
    color:#fff;
    margin-right:-4px;
}

Carattere zero

Impostare la dimensione del contenitore con font-size:0.

nav{
    font-size:0;   
}

Scegli un metodo e provaci tu

Spero che l’articolo sia stato di tuo gradimento. Per qualsiasi dubbio o segnalazione scrivi pure nei commenti o sulla nostra fanpage. Alla prossima 😉

Provalo subito

Prova la demo Consulta il codice
  • Il primo metodo da te illustrato era anche il preferito quando IE6 la faceva da padrone dato che lo spazio tra gli elementi li metteva sempre in una lista e quindi si usava il metodo dell’affiancamento per evitarlo.
    Così si rischia di rendere illeggibile il codice però è anche il metodo che implica meno byte dato che non prevede proprietà aggiuntive settate con i css.

    M.

  • Ciao Marco,
    si il primo esempio in effetti è quello più ottimale in termini di impiego di risorse, ma si tratta veramente di pochissimi byte. Per quanto mi riguarda preferisco avere un codice html leggibile e affidarmi al css 😉

  • Mattia Frigeri
    • Stefano Vollono

      Ciao Mattia! Piu info ci sono meglio è. Grazie per essere intervenuto.

      • Mattia Frigeri

        ;)))

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github