Guida CSS interattiva: Display

Q: Che differenza c'è tra block, inline e inline-block?

Un elemento block inizia su una nuova riga e occupa tutta la larghezza disponibile. Un elemento inline scorre dentro il testo e ignora width, height e i margini verticali. inline-block scorre dentro il testo come inline, ma accetta larghezza, altezza, padding e margini come un blocco.

Q: Che differenza c'è tra display: none e visibility: hidden?

display: none rimuove l'elemento e il suo spazio. visibility: hidden lo rende invisibile ma mantiene il suo spazio nel layout, quindi non si sposta nulla.

Q: Un div è block o inline per impostazione predefinita?

Block. div, p, i titoli, ul, section e form sono block per impostazione predefinita; span, a, strong, em, img, input e button sono inline o inline-block.

Cosa fa display

Ogni elemento ha un valore di display che decide come viene disposto. I primi tre che incontri sono block, inline e inline-block. Ecco tre box identici, con gli stessi width, height, padding e margin, in cui cambia solo display:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
Inizia su una nuova riga	Sì	No	No
Larghezza predefinita	Riempie il contenitore	Si adatta al contenuto	Si adatta al contenuto
`width` e `height`	Si applicano	Ignorati	Si applicano
Margin verticale	Si applica	Ignorato	Si applica
Padding verticale	Spinge il contenuto	Disegnato, ma non allontana le righe	Spinge il contenuto
Elementi tipici	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (gli elementi sostituiti si comportano così)

Nell'anteprima, il box block sta su una riga tutta sua ed è largo 120px. Quello inline ignora larghezza e altezza e avvolge solo la sua parola, e il suo padding e il suo bordo verticali sporgono sopra e sotto la riga senza renderla più alta. Il box inline-block resta nella riga di testo ma mantiene tutte le sue dimensioni.

display: block

Un elemento block occupa tutta la larghezza disponibile e manda a capo ciò che segue. Trasformare un link in un blocco è il modo per rendere cliccabile un'intera riga:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

La larghezza di un blocco si può impostare, e margin: 0 auto lo centra una volta che ce l'ha, come mostra la pagina su come centrare un div.

display: inline-block

inline-block è la via di mezzo: scorre in una riga come una parola, ma puoi dargli dimensioni. È utile per badge, pulsanti e icone dentro il testo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Più box inline-block in fila ricevono un piccolo spazio tra loro dagli spazi bianchi nell'HTML. Per le file di box, display: flex sul genitore è lo strumento migliore.

display: none o visibility: hidden

Entrambi rendono invisibile un elemento. La differenza è se mantiene il suo spazio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
Occupa spazio	No	Sì	Sì
Si può cliccare	No	No	Sì
Letto dagli screen reader	No	No	Sì
Si può animare in modo fluido	No	No	Sì

L'attributo HTML hidden fa lo stesso di display: none tramite il foglio di stile del browser, il che significa che qualsiasi regola CSS che imposta display sull'elemento (per esempio .card { display: flex; }) lo sovrascrive e l'elemento ricompare. Aggiungi [hidden] { display: none !important; } se ti capita.

Per nascondere qualcosa alla vista ma lasciarlo agli screen reader (per esempio l'etichetta di un pulsante con icona), usa una classe "visually hidden" invece di display: none.

display: flex e display: grid

Questi due trasformano un elemento in un contenitore di layout per i suoi figli:

display: flex dispone i figli in una riga o in una colonna, con controllo su allineamento e spaziatura. Vedi flexbox.
display: grid colloca i figli su righe e colonne contemporaneamente.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

Il contenitore in sé resta un blocco. inline-flex e inline-grid fanno lo stesso per i figli ma fanno scorrere il contenitore inline, come inline-block.

Gli altri valori

Valore	Cosa fa
`flow-root`	Un blocco che contiene i suoi float e impedisce ai margini dei figli di uscire; il "clearfix" moderno
`contents`	Il box dell'elemento sparisce e i suoi figli si comportano come figli del suo genitore. Evitalo su pulsanti, liste e tabelle: alcuni browser perdono il significato dell'elemento per gli screen reader
`list-item`	Un blocco con un marcatore di lista, il valore predefinito di `li`
`table`, `table-row`, `table-cell`	Layout a tabella su elementi che non sono tabelle
`inline-flex`, `inline-grid`	Un contenitore flex o grid che sta inline

Errori comuni

Impostare width o height su uno span o un a. Gli elementi inline li ignorano. Usa inline-block o block.
Margin verticale su un elemento inline. Anche questo viene ignorato. Stessa soluzione.
Usare display: none per nascondere un testo pensato per gli screen reader. Lo nasconde anche a loro.
Aspettarsi che un figlio si veda dentro un genitore con display: none. Niente dentro un genitore nascosto viene disegnato.
Una regola display che sovrascrive l'attributo hidden. Vince la regola CSS.
Provare ad animare display. Impostare display: none nasconde subito l'elemento, senza dissolvenza; anima opacity e cambia display (o visibility) alla fine.

Domande frequenti

Che differenza c'è tra block, inline e inline-block?

Un elemento block inizia su una nuova riga e occupa tutta la larghezza disponibile. Un elemento inline scorre dentro il testo e ignora width, height e i margini verticali. inline-block scorre dentro il testo come inline, ma accetta larghezza, altezza, padding e margini come un blocco.

Cosa fa display: none?

Rimuove completamente l'elemento dalla pagina: non occupa spazio, non viene disegnato ed è nascosto agli screen reader. I suoi figli vengono nascosti con lui e non si possono mostrare con un proprio valore di display.

Che differenza c'è tra display: none e visibility: hidden?

display: none rimuove l'elemento e il suo spazio. visibility: hidden lo rende invisibile ma mantiene il suo spazio nel layout, quindi non si sposta nulla.

Un div è block o inline per impostazione predefinita?

Block. div, p, i titoli, ul, section e form sono block per impostazione predefinita; span, a, strong, em, img, input e button sono inline o inline-block.

Perché c'è uno spazio tra gli elementi inline-block?

Lo spazio bianco tra i tag nell'HTML viene reso come uno spazio, proprio come tra le parole. Usa invece display: flex con gap sul genitore, oppure togli lo spazio bianco.

Concetti correlati