Display e flusso
display controlla il tipo di layout degli elementi: block, inline, inline-block, flex e grid.
1. Il concetto, spiegato da zero
display controlla il tipo di layout degli elementi: block, inline, inline-block, flex e grid.
Gli elementi block occupano normalmente una nuova riga; inline segue il testo. Evita di cambiare display per risolvere un problema che dipende dai margini.
2. Un esempio ragionato
Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.
.badge { display: inline-block; padding: 4px 10px; }
.sezione { display: block; margin-top: 20px; }Come leggere questo esempio
- Prima di eseguire, immagina come apparirà il risultato nel browser.
- Spiega con parole tue in che modo “display e flusso” risolve un problema concreto.
- Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
- Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
display:none rimuove il contenuto anche dalla maggior parte delle tecnologie assistive: usalo consapevolmente.
3. Adesso tocca a te
Obiettivo dell’esercizio: Stilizza un badge inline-block e una sezione block.
Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.
Laboratorio: metti alla prova il codice
CSS · cssL’anteprima è isolata dal sito principale: non inserire password o dati personali nel codice di prova.
Output / esito del controllo
Il risultato comparirà qui.
Mostra la soluzione di riferimento
.badge { display: inline-block; padding: 4px 10px; }
.sezione { display: block; margin-top: 20px; }Confronta il tuo procedimento con quello dell’esempio. Una soluzione differente può essere altrettanto valida se produce risultati corretti.
4. Verifica e ripasso
Quiz: hai capito il concetto?
Quale delle seguenti affermazioni è corretta per questo capitolo?
Gli elementi block occupano normalmente una nuova riga; inline segue il testo. Evita di cambiare display per risolvere un problema che dipende dai margini.
5. Come proseguire
Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.