HTML.it - Guida CSS di base - La proprietà display

display: block

Le immagini sono elementi inline e non generano una nuova riga.

Se dichiaro per un'immagine display: block, essa si comporta come gli elementi blocco.

<p>Le immagini sono <img src="logo.png"> elementi [...]</p>
<p>Se dichiaro per un'immagine <img class="block" src="logo.png"> [...]</p>

img.block {display: block;}

display: inline

Questo è un paragrafo con display: inline.

Questo è un altro paragrafo con display: inline: si comportano come gli elementi inline disponendosi uno accanto all'altro orizzontalmente.

Questo è un paragrafo normale.

Questo pure. Generano una nuova riga.

<p class="inline">Questo è un paragrafo [...].</p>
<p class="inline">Questo è un altro paragrafo [...].</p>
<p>Questo è un paragrafo normale.</p>
<p>Questo pure. Generano una nuova riga.</p>

p.inline {display: inline;}

display: inline-block

Abbiamo un link dichiarato inline-block. Posso assegnare larghezza, margini, bordi, padding, ma si comporta sempre come un elemento inline non generando una nuova riga.

<a href="#" class="inline-block">link</a>

a.inline-block {
 display: inline-block;
 margin: 0 20px;
 border: 1px solid white;
 padding: 10px;
 width: 50px;
}

display: none

Titolo

Prima di questo paragrafo, nel codice HTML, c'è un titolo h3. È stato nascosto con display: none.

<h3 class="none">Titolo</h3>
<p>Prima di questo paragrafo [...].</p>

h3.none {display: none;}