Di default i CSS assegnano la proprietà display:inline a quegli elementi come lo span, i link (a), etc., che possono essere contenuti all'interno di un paragrafo e che, quindi, devono essere mostrati in riga con gli altri elementi. Uno dei problemi di questa proprietà è che non interpreta le proprietà width ed height ma le assegna in base al contenuto dell'oggetto. Ad esempio, se abbiamo un link il cui contenuto occupa 100px in larghezza, anche impostando una larghezza maggiore, lo spazio occupato dall'elemento sarà sempre di 100 pixel. Questo problema può risultare scomodo soprattutto nei menu dove spesso l'area cliccabile è maggiore di quella effettivamente occupata dall'elemento.
Gli elementi di tipo blocco hanno la proprietà display con valore block. Sono, ad esempio, i paragrafi e tutti i tag di heading (h1, h2, h3, ...). Questi elementi, quando specificate, assumono le dimensioni impostate nel CSS e, salvo utilizzo della proprietà float, non accettano altri oggetti sulla stessa riga.
Succede molto spesso di avere la necessità di utilizzare un elemento inline come elemento di tipo blocco o viceversa. Per sopperire a questo problema è sufficiente modificare la proprietà display dell'oggetto impostandola sul valore desiderato.
Vediamo alcuni esempi per chiarire il concetto.
<div class="box">Lorem ipsum dolor sit amet</div>
<p>Lorem ipsum dolor sit amet</p>Entrambi gli elementi nel codice precedente hanno la proprietà display impostata su block di default, questo significa che entrambi sono su una riga diversa e che lo spazio alla loro destra resterà inutilizzabile per gli altri elementi della pagina, come possiamo vedere in figura 1:
Modificando il valore della proprietà display su inline, vedremo che il paragrafo si comporta come se avessimo impostato il valore float su left. Il paragrafo, infatti, si posiziona immediatamente dopo il div ed entrambi "liberando" lo spazio sulla destra.
div, p { display: inline; }
Possiamo vedere le differenze nelle 2 demo: display block - display inline.