La proprietà display è la più importante proprietà CSS per controllare il layout.

La proprietà display

La proprietà display specifica se e come un elemento è visualizzato.

Ogni elemento HTML ha un valore display di default che dipende dal tipo di elemento di cui si tratta. Il valore di default della proprietà display per molti elementi è block o inline.

Elementi a livello di blocco

Un elemento a livello di blocco inizia su una nuova linea e occupa la piena larghezza disponibile (estendendosi il più possibile da sinistra a destra).

L'elemento <div> è un elemento a livello di blocco.

Esempi di elementi a livello di blocco:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Elementi Inline

Un elemento inline non inizia una nuova riga e prende solo lo spazio in larghezza necessario.

Esempi di elementi in linea:

• <span>
• <a>
• <img>

Display: none;

display: none; è usato comunemente con Javascript per nascondere e mostrare elementi senza cancellarli e ricrearli.

L'elemento <script> usa display:none; come default.

Sovrascrivere il valore di default di Display

Come detto, ogni elemento ha un valore di default per display. Tuttavia, si può sovrascrivere.

Cambiando un elemento inline in un elemento block, o viceversa, può essere utile per far apparire le pagine in un modo specifico e continuare a seguire gli standards del web.

Un esempio comune è rendere gli elementi <li> inline per i menù orizzontali:

Esempio

li {
  display: inline;
}

Il seguente esempio mostra gli elementi <span> come blocchi:

Esempio

span {
  display: block;
}

Il seguente esempio mostra gli elementi <a> come elementi block:

Esempio

a {
  display: block;
}

Nascondere un elemento - display:none o visibility:hidden?

Nascondere un elemento può essere fatto impostando la proprietà display a none. L'elemento sarà nascosto, e la pagina sarà mostrata come se l'elemento non ci fosse.

Esempio

h1.hidden {
  display: none;
}

Anche visibility: hidden; nasconde un elemento.

Tuttavia, l'elemento prenderà ancora lo stesso spazio di prima. L'elemento sarà nascosto ma impatterà sul layout:

Esempio

h1.hidden {
  visibility: hidden;
}

Proprietà CSS Display/Visibility