display

Ogni elemento su una pagina web è una scatola rettangolare. La proprietà display nei CSS determina proprio come si comporta quella scatola rettangolare. Ci sono solo una manciata di valori comunemente usati:

div { display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like <div> and <section> block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */}

Il valore predefinito per tutti gli elementi è inline. La maggior parte degli “User Agent Stylesheets” (gli stili predefiniti che il browser applica a tutti i siti) resetta molti elementi a “block”. Passiamo attraverso ognuno di questi, e poi copriamo alcuni degli altri valori meno comuni.

Inline

Il valore predefinito per gli elementi. Pensate a elementi come <span><em>, o <b> e a come l’avvolgimento del testo in questi elementi all’interno di una stringa di testo non interrompe il flusso del testo.

L’elemento <em> ha un bordo rosso di 1px. Notate che si trova proprio in linea con il resto del testo.

Un elemento in linea accetterà margine e padding, ma l’elemento si trova ancora in linea come ci si potrebbe aspettare. Margine e padding spingeranno gli altri elementi solo orizzontalmente, non verticalmente.

Un elemento in linea non accetta height e width. Semplicemente li ignorerà.

Blocco in linea

Un elemento impostato su inline-block è molto simile all’inline in quanto si posizionerà in linea con il flusso naturale del testo (sulla “linea di base”). La differenza è che siete in grado di impostare un width e height che sarà rispettato.

Blocco

Un certo numero di elementi è impostato su block dal foglio di stile UA del browser. Di solito sono elementi contenitore, come <div><section>, e <ul>. Anche i “blocchi” di testo come <p> e <h1>. Gli elementi a livello di blocco non stanno in linea, ma si interrompono al di là di essi. Per default (senza impostare una larghezza) occupano tutto lo spazio orizzontale possibile.

Run-in

In primo luogo, questa proprietà non funziona in Firefox. Si dice che la specifica per essa non sia abbastanza ben definita. Per cominciare a capirlo, però, è come se si volesse che un elemento di intestazione stia in linea con il testo sottostante. Il floating non funzionerà e nemmeno qualsiasi altra cosa, poiché non volete che l’intestazione sia un figlio dell’elemento di testo sottostante, volete che sia un proprio elemento indipendente. Nei browser che “supportano”, è così:

Flexbox

La proprietà display è usata anche per nuovi metodi di layout come Flexbox.

.header { display: flex;}

Ci sono alcune vecchie versioni della sintassi di flexbox, quindi consultate questo articolo per la sintassi nell’uso di flexbox con il miglior supporto del browser. Assicuratevi di vedere questa guida completa a Flexbox.

Flow-Root

Il valore di visualizzazione flow-root crea un nuovo “contesto di formattazione del blocco”, ma è altrimenti come block. Un nuovo BFC aiuta con cose come la cancellazione dei float, rimuovendo la necessità di hack per farlo.

.group { display: flow-root;}

body { display: grid;}

div { display: table; display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption;}

<div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> Gross but sometimes useful. </div> </div></div>