Con l'avvento di HTML5 e CSS3, la proprietà CSS display si è arricchita di un nuovo valore denominato inline-block. Questo nuovo valore permette agli oggetti renderizzati inline (cioè uno accanto all'altro come ad esempio span e label) di prendere in considerazione proprietà come padding, margin, width o height che sono utilizzate solo dagli elementi renderizzati come block (div, p e così via).

Grazie a questo nuovo valore possiamo limitare l'uso della proprietà float in quanto gli elementi di tipo block vengono automaticamente renderizzati uno accanto all'altro. Vediamo ora come usare il nuovo valore.

<ul><li>item1</li>
<li>item2</li>
<li>item3</li>

Il risultato di questo frammento HTML sono i tre elementi li uno sotto l'altro in quanto i tag li sono renderizzati come block. Modifichiamo ora la modalità di renderizzazione a inline-block.

ul li {
  display: inline-block;
}

Aggiungendo questa direttiva CSS, il frammento HTML visto in precedenza viene renderizzato con i tre tag li uno accanto all'altro.