CSS: icone dei social network con inline-block

Il valore CSS inline-block della proprietà display ci permette di formattare con estrema semplicità le icone dei social network.

Le icone dei social network solitamente vengono realizzate con i CSS utilizzando immagini di sfondo su ciascun link HTML. Il problema maggiore è allineare tutte le icone sulla stessa riga. Normalmente viene usato il floating, ma da Internet Explorer 8 in poi è disponibile anche un’altra soluzione: usare il valore inline-block della proprietà display. Vediamo insieme i dettagli dell’esempio.

Per prima cosa si deve tener presente che inline-block da luogo a un ruolo di visualizzazione misto: gli elementi si dispongono sulla stessa riga, ma vengono formattati come elementi di blocco.

Partiamo dalla seguente struttura HTML:

Il codice CSS è il seguente:

A ciascun link sono state applicate altezza e larghezza e l’indentazione negativa del testo esattamente come se si trattasse di elementi di blocco. Questa è la particolarità del valore inline-block: un elemento è sia inline che block.

Potete visionare l’esempio finale in questa pagina.