Corso di CSS / display: block, inline, inline-block e contenuti nascosti

La proprietà display determina come un elemento genera box e partecipa al layout. block, inline e inline-block si comportano in modo diverso nel flusso normale; display: none rimuove il box, mentre visibility: hidden lascia lo spazio del layout.

Confronta block, inline e inline-block

div·p viene solitamente visualizzato come un blocco, e span·a viene solitamente visualizzato in linea. Se non si assegna a un blocco una larghezza separata, di solito riempirà la larghezza disponibile del suo elemento padre. Inline è posizionato all'interno di una riga come le lettere in una frase, consentendo a contenuti lunghi di essere suddivisi su più righe. Un inline-block è trattato come un'unica casella posizionata all'interno di una riga, quindi anche se il contenuto all'interno della casella va a capo, la casella stessa non viene divisa in più parti come un inline normale.

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

L'intero esempio assegna la stessa dimensione e margine agli stessi tre span e cambia solo il display. block fa iniziare ogni elemento su una nuova riga, mentre inline-block li posiziona sulla stessa riga se c'è spazio. La dichiarazione width·height di inline non rende la larghezza e l’altezza effettive di un normale span uguali ai valori dichiarati, anche se rimane nella lista degli stili. Controlla separatamente la dichiarazione calcolata e la dimensione effettivamente utilizzata.

Comprendere lo spazio inline e gli elementi sostituiti

Nei normali elementi inline, i margini e il padding sinistro e destro influenzano lo spazio all'interno della riga. Il padding e i bordi superiore e inferiore possono essere disegnati, ma non determinano l'altezza della riga spingendo le righe circostanti come i blocchi. Se si assegna un grande padding verticale a un testo su più righe, potrebbe apparire sovrapposto. In tutto l'esempio, osserviamo il comportamento del display consentendo un certo margine di tolleranza nell'altezza della riga.

Non applicare il principio “gli elementi inline non possono essere dimensionati” a ogni elemento. Gli elementi sostituiti, come img, visualizzano contenuti esterni e possono utilizzare larghezza e altezza anche quando il loro display predefinito è inline. Il rettangolo blu nell'esempio è di 120 × 60px. Trattalo diversamente da un semplice span di testo. La guida MDN ai layout a blocchi e inline spiega il flusso sottostante.

Confronta display: none e visibility: hidden

DOM (Document Object Model) è un modello in cui i browser trattano i documenti HTML come una struttura di elementi. Nascondere con CSS è diverso dall'eliminare un elemento HTML. I paragrafi con display: none possono essere trovati anche in Elements negli strumenti per sviluppatori. Nella linea “front, target, back” dell'intero esempio, hidden lascia uno spazio vuoto nella posizione target, e none significa che le lettere dietro di esso vengono portate in avanti.

Nascondere un elemento può modificare l'accesso tramite tastiera e la sua disponibilità alle tecnologie assistive oltre al suo aspetto. Questo esercizio confronta lo spazio della casella in un documento statico. Per menu e controlli reali, verifica anche la gestione del focus e se le informazioni necessarie rimangono disponibili. Vedi MDN: display, MDN: visibility.

Allineare i box inline-block all'interno del flusso normale

Poiché inline-block si trova all'interno di una riga di testo, è allineato per impostazione predefinita alla linea di base della riga. Se vedi spazi vuoti sotto un elemento o elementi con altezze diverse non allineati correttamente, controlla insieme vertical-align e line-height. Anche spazi bianchi o interruzioni di riga tra gli elementi in HTML possono creare gap visibili nella disposizione inline.

Cambiare display modifica la disposizione, ma non la semantica: uno span non diventa un titolo e un div non acquisisce il comportamento di un pulsante. Scegli l'HTML che corrisponde al tuo significato e imposta la sua collocazione. Se hai bisogno di gestire l'allineamento, lo spazio e le dimensioni di più box insieme, le regole che imparerai più avanti in Flexbox·Grid potrebbero essere più appropriate. Una volta compreso il flusso di base, diventa più facile determinare cosa cambia nell'organizzazione. Come posizionare gli elementi lungo un asse è trattato con un esempio completo in Basi di Flexbox: contenitori, elementi e assi. Come progettare righe e colonne insieme è trattato con un esempio completo in Basi di CSS Grid: tracce, linee e posizionamento.

Esegui l'esempio e cambia un valore alla volta

Salva il codice qui sotto come UTF-8 in display.html e aprilo. Gli esempi di immagini contengono dati SVG incorporati, senza bisogno di un file immagine separato. Confronta tre metodi di posizionamento e tre stati di visibilità nello stesso documento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. Negli Strumenti per sviluppatori, controlla la dimensione degli elementi block e inline-block fino ai loro bordi. È 120×48px a causa della regola comune border-box. Gli elementi inline non sono fissati a una larghezza di 120px anche se hanno la stessa dichiarazione di larghezza.
2. Restringi la finestra per vedere se il terzo elemento in inline-block va a capo sulla riga successiva. Ogni blocco inizia su una nuova riga, anche su schermi ampi.
3. Disattiva la dichiarazione display: none nella regola .none .target. Controlla se la posizione delle lettere dietro di esso cambia quando appare il target. Se disattivi la dichiarazione di visibilità hidden, l'oggetto apparirà, ma lo spazio originariamente riservato verrà mantenuto.
4. Cambia solo la larghezza dell'immagine a 160px. A differenza di uno span inline normale, verifica che la dimensione cambi, poi ripristina 120px. Se mantieni l'altezza fissa a 60px e cambi solo la larghezza, il rapporto originale cambierà.

Se il posizionamento è diverso dal previsto, controlla il valore finale di display, il metodo di posizionamento del genitore, la dimensione del box e l'altezza della linea. Piuttosto che aggiungere continuamente dichiarazioni di dimensione che non si applicano, è utile prima distinguere tra tipi di elementi e flussi di base.