Proprietà CSS display

La proprietà display è una delle proprietà CSS più importanti per controllare il layout. Definisce il tipo di box di rendering generato da un elemento HTML — se si trova su una riga propria, scorre in linea con il testo, diventa un contenitore flex o grid, oppure scompare del tutto.

Questo capitolo tratta cosa fa ogni valore di display, la differenza tra il display esterno (come il box si comporta nei confronti dei suoi fratelli) e il display interno (come i suoi figli vengono disposti), le problematiche più comuni e degli esempi eseguibili per ogni valore chiave.

Perché la proprietà display è importante

Ogni elemento inizia con un valore display predefinito fornito dal foglio di stile user-agent del browser — <div> e <p> hanno come valore predefinito block, <span> e <a> hanno come valore predefinito inline, <li> ha come valore predefinito list-item, e così via. Con display puoi sovrascrivere quel valore predefinito. Ad esempio, un elemento di tipo block può essere fatto scorrere inline impostando display: inline, e un elenco di link può essere trasformato in una barra di navigazione orizzontale.

Due ulteriori note sui valori predefiniti:

• In HTML, il display iniziale di un elemento proviene dalla specifica HTML o dal foglio di stile del browser/utente — non dalla parola chiave predefinita display: inline che vedi nella specifica CSS.
• In XML (che non ha stili incorporati), ogni elemento ha davvero come valore predefinito inline.

CSS precedente vs. moderno: nelle specifiche precedenti, width e height non avevano effetto sugli elementi inline. La nota appare ancora in molti tutorial, ma in pratica i browser ignorano width/height su un box inline semplice. Per dimensionare un elemento e mantenerlo sulla riga, usa inline-block.

Tipi di box in CSS

Esistono diversi formati principali di box in CSS:

• Inline — I box inline scorrono all'interno di una riga di testo e non forzano un'interruzione di riga. <span>, <em> e <img> sono inline per impostazione predefinita. Un box inline accetta padding e margini, ma il padding/margine verticale non allontana le righe vicine, e width/height vengono ignorati. Per dimensionare il box mantenendolo sulla riga, usa inline-block. (Vedi elementi block vs. inline.)
• Inline-block — Si comporta come un box inline (si trova sulla riga accanto al testo e ad altri contenuti inline), ma rispetta width, height e i margini/padding verticali. Questo è il valore da utilizzare quando si vuole un dimensionamento simile a un box senza andare su una nuova riga.
• Block — I box block-level iniziano su una nuova riga e, per impostazione predefinita, si estendono per riempire la larghezza disponibile del loro contenitore. Possono contenere altri box block-level. <p>, <ul>, <h1>-<h6>, <div>, <section> e <ol> sono block-level per impostazione predefinita.
• Flex — display: flex genera un contenitore flex block-level e dispone i suoi figli diretti lungo un singolo asse. Vedi La guida completa a Flexbox.
• Grid — display: grid genera un contenitore grid block-level e dispone i suoi figli in due dimensioni (righe e colonne). Vedi la proprietà grid.
• Valori table — Valori come table, table-row e table-cell fanno sì che elementi non-table si comportino come i corrispondenti elementi HTML di tabella. inline-table si comporta come un <table> ma come box inline; all'interno del box tabella viene stabilito un contesto block-level.

Display esterno vs. interno: il CSS moderno descrive display come due parti. Il valore esterno (block o inline) controlla come il box partecipa al layout del suo genitore; il valore interno (flow, flex, grid, table) controlla come il box dispone i propri figli. Ecco perché flex rende un elemento un box block-level e un contenitore flex allo stesso tempo.

Sintassi

Sintassi della proprietà CSS display

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Esempio della proprietà display:

Esempio della proprietà CSS display con valore inline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .display li {
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with its initial value:</p>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <p>Here the list item is used with the display property. The "inline" value is used:</p>
    <ul class="display">
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>

Risultato

Quando display: inline viene applicato agli elementi di lista, questi non iniziano più ciascuno su una nuova riga — si trovano invece uno accanto all'altro, separati solo dal margin-right impostato.

Esempio della proprietà display con i valori "inline" e "block":

Esempio della proprietà CSS display con i valori inline e block

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inline {
        border: 1px solid #1c87c9;
        display: inline;
      }
      .block {
        border: 1px solid #1c87c9;
        display: block;
        height: 30px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr />
    <p>Here the list item is used with the "block" value of the display property:</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>
  </body>
</html>

Il primo paio di <span> rimane su una riga perché inline ignora width e height. Gli span .block, al contrario, occupano ciascuno una riga intera e rispettano la larghezza di 300px e l'altezza di 30px.

Esempio della proprietà display con il valore "block":

Esempio della proprietà CSS display con il valore block

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .block {
        display: block;
        border: 1px solid #666;
        background-color: #eee;
        padding: 10px;
        width: 200px;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #8ebf42;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="block">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Esempio della proprietà display con il valore "contents":

Esempio della proprietà CSS display con il valore contents

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .contents {
        display: contents;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="contents">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Con display: contents, il wrapper .contents non genera nessun box proprio — il suo bordo e il suo sfondo verrebbero ignorati, e i suoi figli (il testo e il box .hello) si comportano come se fossero figli diretti di <body>.

Esempio della proprietà display con il valore "flex":

Esempio della proprietà CSS display con il valore flex

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #flex {
        width: 300px;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: flex;
        justify-content: center;
      }
      div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the "display: flex;" is used:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>

Valori

display: none vs. visibility: hidden

Un punto di confusione frequente: display: none rimuove l'elemento dal flusso del documento completamente — non occupa spazio, come se fosse stato eliminato. visibility: hidden nasconde l'elemento ma mantiene il suo box, quindi riserva ancora lo spazio che avrebbe occupato. Usa display: none per comprimere il layout, e visibility: hidden per nascondere preservando lo spazio nel layout.

Proprietà correlate

• La guida completa a Flexbox — tutto ciò che display: flex rende possibile.
• grid — costruire layout bidimensionali con display: grid.
• visibility — nascondere elementi senza rimuoverli dal flusso.
• position e float — altri modi per controllare come vengono posizionati i box.
• Elementi block e inline — i valori predefiniti HTML che display sovrascrive.

Esercitazione