Disporre elementi in orizzontale con i CSS: inline-block, pro e contro

Robert Nyman sul suo blog ci propone un metodo alternativo al "float" per disporre blocchi di elementi affiancati orizzontalmente.

Come il primo metodo anche questo, che utilizza la direttiva inline-block, ha dei pregi e anche dei difetti.

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block…

Tra i pregi un maggiore semplicità (forse) e minori problemi rispetto alle dimensioni dei blocchi contenuti nell'elemento contenitore principale.

Ma tra i difetti quello, importante, di subire l'elemento "spazio" che rischia di rovinare l'allineamento mandando a capo uno dei blocchi. Tra i work-around per risolvere questo difetto c'è quello di allineare gli elementi <li> uno dietro l'altro oppure di commentare gli spazi bianche lasciando nel CSS la suddivisione per righe.

Ma come si può leggere anche nei commenti dell'articolo CSS display: inline-block: why it rocks, and why it sucks anche queste soluzioni possono essere influenzate dal modo in cui un server può trattare gli spazi o di come un browser, per ottimizzare la velocità di rendering, visualizza questi elementi.

Insomma, la soluzione perfetta non c'è ma è importante sapere che c'è un'alternativa all'uso dei float, se serve.