Prerequisiti: Flusso normale della pagina.
Scatole block, inline e inline-block
Scatole block, inline e inline-block: fondamenti.
Senza tecniche particolari, il browser dispone i contenuti nel flusso normale. In un contesto a blocchi gli elementi block iniziano tipicamente su una nuova riga e, con larghezza auto, occupano lo spazio disponibile. Gli elementi inline partecipano alle righe di testo e possono spezzarsi su più righe. display cambia il comportamento delle scatole; non cambia il significato dell’elemento HTML. Un link con display: block rimane semanticamente un collegamento.
Come funziona: scatole block, inline e inline-block
Scatole block, inline e inline-block: comportamento nel browser.
Un normale elemento inline non sostituito, come span, non usa width e height nello stesso modo di un blocco. inline-block partecipa alla riga ma permette di controllare le dimensioni del proprio box: è utile per piccoli badge. I margini verticali e gli spazi di riga possono sorprendere se si ragiona sugli inline come fossero blocchi. Per impaginare gruppi di componenti useremo più avanti Flexbox e Grid, che offrono controlli espliciti sugli spazi.
Scelte di utilizzo e limiti
Scatole block, inline e inline-block: progetto e verifica.
display: none rimuove le scatole dell’elemento dal layout e normalmente lo esclude anche dall’albero di accessibilità. visibility: hidden nasconde la resa mantenendo lo spazio; opacity: 0 rende trasparente l’elemento ma non impedisce automaticamente focus o interazioni. Sono comportamenti diversi, quindi non scegliere una tecnica soltanto perché il risultato iniziale sembra invisibile. Un contenuto indispensabile non deve essere nascosto senza una modalità adeguata per renderlo disponibile.
Esempio commentato
Scatole block, inline e inline-block: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>display: block, inline e inline-block</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<p>Testo con <span class="badge">CSS</span> e un altro <span class="badge">HTML</span>.</p>
<a class="collegamento" href="#fine">Un collegamento a blocco</a>
<p id="fine">Fine dell’esempio.</p>
</body>
</html>
File stile.css
.badge {
display: inline-block;
min-width: 4rem;
padding: 0.25rem 0.5rem;
background-color: #eef4fa;
text-align: center;
}
.collegamento {
display: block;
margin-block: 1rem;
}
Risultato nel browser
I badge mantengono una scatola controllabile dentro la riga. Il link diventa un blocco e continua a essere attivabile da tastiera.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
display | inline-block | Tipo di scatola e contesto di layout. |
min-width | 4rem | Limite inferiore alla larghezza. |
padding | 0.25rem 0.5rem | Spazio interno fra contenuto e bordo. |
background-color | #eef4fa | Colore dello sfondo dell’elemento. |
text-align | center | Allineamento del contenuto inline nel blocco. |
LABORATORIO
Sperimentare: Scatole block, inline e inline-block
I badge mantengono una scatola controllabile dentro la riga. Il link diventa un blocco e continua a essere attivabile da tastiera.
Obiettivo: Comprendere e applicare scatole block, inline e inline-block attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Osserva come cambia l’effetto di min-width.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
inline-block applica la larghezza minima. display: none elimina lo spazio del link, mentre visibility: hidden conserva il suo ingombro.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | inline-block applica la larghezza minima. display: none elimina lo spazio del link, mentre visibility: hidden conserva il suo ingombro. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Trasforma ogni badge in un blocco separato largo 6rem.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
.badge {
display: block;
width: 6rem;
margin-block: 0.5rem;
}Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Scatole block, inline e inline-block: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Quale display permette una scatola dimensionabile dentro la riga? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.