CSS: gestione dello spazio orizzontale degli elementi inline-block

Gli elementi inline-block presentano un problema particolare nel modo con cui i browser gestiscono il loro spazio orizzontale. Se infatti nella marcatura sono presenti delle spaziature o dei ritorni a capo, lo spazio orizzontale verrà distribuito in modo diseguale. Dobbiamo quindi normalizzare lo spazio orizzontale. Vediamo come.

La seguente marcatura presenta spazi e ritorni a capo:

<ul>
    <li>A</li>

    <li>B</li>

    <li>C</li>

</ul>​

Possiamo combinare insieme le proprietà word-spacing, vertical-align e line-height per normalizzare questi elementi:

ul {
    margin: 16px;
    text-align: center;
    word-spacing: 0px;
    vertical-align: top;
    line-height: 1;
    
}

li {
    display: inline-block;
    padding: 3px 5px;
    background: #ccc;
    margin-right: 5px;
    width: 5em;
}​

Potete visualizzare il test di seguito.

Test

Gestione dello spazio orizzontale degli elementi inline-block