Prerequisiti: struttura HTML e sintassi di una regola CSS.
1. Che cos’è il box model?
Il browser organizza gli elementi in riquadri: contenuto, padding, bordo e margine.
Per visualizzare una pagina, il browser dispone i contenuti in riquadri. Il box model, cioè il modello a scatola, descrive le parti di questi riquadri e permette di capire quanto spazio occupano.
Partiamo da un elemento a blocco, come un div. Dal centro verso l’esterno troviamo quattro parti: contenuto, padding, bordo e margine. Un riquadro esiste anche quando non disegniamo un bordo visibile.
Testo, immagini e altri elementi
| Parte | Significato | Proprietà principali |
|---|---|---|
| Contenuto | L’area in cui si trovano testo, immagini ed elementi figli. | width, height, limiti minimi e massimi. |
| Padding | Spazio tra il contenuto e il bordo. | padding e proprietà dei singoli lati. |
| Bordo | Contorno intorno a contenuto e padding. | border, border-width, border-style, border-color. |
| Margine | Spazio esterno al bordo, che contribuisce a separare il riquadro dagli altri. | margin e proprietà dei singoli lati. |
↑ Torna all’indice della pagina
2. Osservare un riquadro completo
Un esempio visivo per riconoscere lo spazio interno, il bordo e lo spazio esterno.
Il seguente esempio mostra un riquadro con contenuto, padding, bordo e margine. Il fondo giallo del contenitore rende riconoscibile lo spazio esterno.
Esempio con stile in pagina: il CSS è scritto nel tag <style>, all’interno della <head>. Puoi copiare l’intero documento in un file esempio.html e aprirlo nel browser.
Documento HTML completo
Stile interno nella head · file esempio.html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contenuto, padding, bordo e margine</title>
<style>
.contenitore {
display: flow-root;
background-color: #fff0d1;
border: 1px dashed #b76b00;
}
.riquadro {
width: 200px;
padding: 20px;
border: 4px solid #17365d;
margin: 25px;
background-color: #dceeff;
}
</style>
</head>
<body>
<div class="contenitore">
<div class="riquadro">Questo è il contenuto.</div>
</div>
</body>
</html>Risultato nel browser
Questa anteprima visualizza esattamente il documento affiancato.
- Contenuto: il testo si trova nell’area centrale, larga 200 pixel.
- Padding: ci sono 20 pixel di spazio interno su ogni lato.
- Bordo: la linea blu è spessa 4 pixel su ogni lato.
- Margine: fuori dal bordo ci sono 25 pixel su ciascun lato.
Il colore di sfondo del riquadro si estende normalmente anche sotto il padding e il bordo. Il margine è trasparente: la fascia gialla appartiene al contenitore, non al riquadro.
Display: flow-root viene usato qui per evitare che i margini verticali del figlio collassino con quelli del contenitore. Approfondiremo questo comportamento nella pagina dedicata a margin e padding.
↑ Torna all’indice della pagina
3. Calcolare la larghezza con content-box
Width misura il contenuto: padding e bordi si aggiungono alla dimensione dichiarata.
Il valore iniziale di box-sizing è content-box. In questo modello width e height impostano le dimensioni del solo contenuto. Padding e bordo si aggiungono.
Larghezza del riquadro, esclusi i margini:
contenuto + padding sinistro + padding destro
+ bordo sinistro + bordo destro
200 + 20 + 20 + 4 + 4 = 248 pixelSe aggiungiamo i margini laterali di 25 pixel, lo spazio orizzontale richiesto è 298 pixel: 248 + 25 + 25. Non bisogna confondere la larghezza del riquadro fino al bordo con lo spazio che comprende anche i margini.
↑ Torna all’indice della pagina
4. Il modello border-box
Width comprende contenuto, padding e bordo. Il margine rimane esterno.
Con box-sizing: border-box;, width e height comprendono anche padding e bordo. Il contenuto usa lo spazio rimanente. Il margine continua a essere esterno.
Esempio con stile in pagina: il CSS è scritto nel tag <style>, all’interno della <head>. Puoi copiare l’intero documento in un file esempio.html e aprirlo nel browser.
Documento HTML completo
Stile interno nella head · file esempio.html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Confronto tra content-box e border-box</title>
<style>
.contenitore {
display: flow-root;
background-color: #fff0d1;
}
.content, .border {
width: 200px;
padding: 20px;
border: 4px solid #17365d;
margin: 15px;
background-color: #dceeff;
}
.content {
box-sizing: content-box;
}
.border {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="contenitore"><div class="content">Content-box: width 200px</div><div class="border">Border-box: width 200px</div></div>
</body>
</html>Risultato nel browser
Questa anteprima visualizza esattamente il documento affiancato.
| Impostazione | Larghezza fino al bordo | Larghezza del contenuto |
|---|---|---|
| content-box | 248px | 200px |
| border-box | 200px | 152px: 200 − 40 di padding − 8 di bordo. |
Border-box rende spesso più semplice controllare riquadri con larghezze definite o percentuali. Non comprime automaticamente il testo per farlo entrare: un contenuto troppo grande può comunque uscire dal riquadro.
Un’impostazione comune per la pagina
*, *::before, *::after {
box-sizing: border-box;
}Questa regola applica border-box agli elementi e ai loro pseudo-elementi before e after. È una scelta di progetto frequente, non una regola obbligatoria del CSS.
↑ Torna all’indice della pagina
5. Margin e padding: quale scegliere?
Il margine separa i riquadri; il padding distanzia il contenuto dal bordo.
| Obiettivo | Scelta | Esempio |
|---|---|---|
| Separare il testo dal bordo | Padding. | padding: 20px; |
| Distanziare una scheda dal contenuto circostante | Margin. | margin-bottom: 25px; |
| Creare spazio ai lati di un pulsante, dentro il suo sfondo | Padding. | padding: 10px 20px; |
| Separare elementi flex o grid tra loro | Spesso gap sul contenitore. | gap: 15px; |
Entrambe le proprietà possono ricevere da uno a quattro valori. Con due valori, il primo riguarda sopra e sotto, il secondo destra e sinistra. Le pagine dedicate approfondiscono questa sintassi.
↑ Torna all’indice della pagina
6. Guardare il box model nel browser
I DevTools mostrano le dimensioni calcolate e aiutano a capire gli spazi della pagina.
I DevTools permettono di controllare le dimensioni reali di un elemento. Non servono per creare il box model: il browser lo usa già per visualizzare la pagina.
- Apri una pagina e fai clic destro sull’elemento da osservare.
- Scegli Ispeziona.
- Nel pannello degli stili o delle proprietà calcolate cerca il diagramma del box model. La posizione e i nomi dei pannelli dipendono dal browser.
- Osserva l’area del contenuto, il padding, i bordi e i margini.
- Modifica temporaneamente una proprietà e confronta il risultato. Per conservarla, riportala nel file CSS.
Il diagramma può mostrare valori in pixel anche se nel CSS hai scritto percentuali o rem: il browser calcola le dimensioni usate nel contesto attuale.
↑ Torna all’indice della pagina
LABORATORIO
7. Modificare l’anteprima con i DevTools
Obiettivo: osservare come cambiano contenuto, padding, bordo e margine quando modifichiamo una dichiarazione CSS nel browser.
Non occorre un editor: lavoriamo soltanto sull’anteprima nel browser. In altri browser i nomi dei pannelli possono cambiare.
1. Il riquadro da modificare
Questo laboratorio usa lo stile in linea: le dichiarazioni sono nell’attributo style del riquadro. Per questo nei DevTools le trovi in element.style. Gli esempi teorici precedenti, invece, usano lo stile in pagina, con un tag <style> nella head.
Lavora nel riquadro qui sotto: il testo “Modifica questo riquadro” appartiene all’elemento da selezionare. Il riquadro verde successivo serve a osservare la distanza esterna.
Se la finestra è stretta o aumenti molto le misure, nell’anteprima possono comparire barre di scorrimento.
2. Selezionare l’elemento giusto
- Metti il puntatore direttamente sulle parole “Modifica questo riquadro” nell’anteprima.
- Fai clic destro e scegli Ispeziona. Non scegliere “Visualizza sorgente”.
- Nel pannello Elements / Elementi deve essere selezionato un tag con
id="laboratorio-box". - Se è selezionato un altro elemento, usa l’icona con il puntatore dentro un riquadro, in alto a sinistra nei DevTools, e fai clic sul testo dell’anteprima. Controlla di nuovo l’id.
- Apri la scheda Styles / Stili, normalmente a destra o sotto il codice HTML.
- In cima alle regole cerca
element.style. Qui sono già presenti le proprietà che useremo: non devi creare una nuova regola.
element.style {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #17365d;
margin-bottom: 20px;
background-color: #dceeff;
color: #17365d;
font-size: 18px;
}Element.style è l’etichetta con cui i DevTools mostrano le dichiarazioni dell’attributo HTML style. Non è un selettore da copiare nel foglio CSS.
3. Prima prova: cambiare il colore
- In element.style trova
color: #17365d;. Non confonderla con background-color. - Fai doppio clic sul valore #17365d, a destra dei due punti. Non sul nome color e non sulla casella di spunta.
- Scrivi
rede premi Invio. Seleziona l’intero valore prima di sostituirlo. - Guarda l’anteprima: il testo diventa rosso; sfondo e bordo mantengono i loro colori.
- Per ripristinare, fai doppio clic su red, scrivi
#17365de premi Invio.
Per scegliere un colore puoi anche fare clic sul quadratino colorato accanto al valore. Per queste prove, scrivere il valore richiesto rende più facile confrontare i risultati.
4. Provare le parti del box model
Per ogni riga ripeti la stessa procedura: trova la proprietà, fai doppio clic sul suo valore, sostituiscilo e premi Invio. Ripristina il valore iniziale prima di passare alla prova successiva.
| Proprietà da trovare | Valore iniziale | Valore da provare | Risultato da osservare |
|---|---|---|---|
background-color | #dceeff | lightyellow | Lo sfondo diventa giallo chiaro. È colorato anche lo spazio del padding; il margine rimane esterno. |
padding | 20px | 40px | Il testo si allontana dal bordo. Con content-box la larghezza del contenuto rimane 200px e il riquadro complessivo cresce. |
border | 4px solid #17365d | 8px dashed #17365d | Il bordo diventa più spesso e tratteggiato. Seleziona e sostituisci tutti e tre i componenti del valore. |
margin-bottom | 20px | 50px | Il riquadro verde si allontana di altri 30px. Lo spazio esterno non assume il colore azzurro del riquadro superiore. |
width | 200px | 240px | L’area del contenuto si allarga. Padding e bordo conservano i valori iniziali. |
font-size | 18px | 26px | Il testo cresce e può andare a capo. L’altezza automatica del riquadro si adatta al contenuto. |
box-sizing | content-box | border-box | Con width: 200px, padding: 20px e border: 4px, la larghezza complessiva passa da 248px a 200px. Lo spazio del contenuto passa da 200px a 152px. |
5. Disattivare e riattivare una dichiarazione
- Ripristina padding: 20px.
- Passa con il puntatore sulla riga padding in element.style: a sinistra dovrebbe comparire una casella di spunta.
- Togli la spunta. La dichiarazione viene disattivata: il testo si avvicina al bordo perché il padding torna al valore iniziale zero.
- Rimetti la spunta. Il padding di 20px torna attivo.
La casella è utile per confrontare rapidamente la pagina con e senza una dichiarazione, senza cancellarla.
6. Osservare le dimensioni calcolate
- Lascia selezionato l’elemento con id laboratorio-box.
- Apri la scheda Computed / Calcolato. Se non è visibile, cerca nel menu delle schede aggiuntive indicato da doppie frecce.
- Cerca il diagramma con margin, border e padding, e la dimensione del contenuto al centro.
- Con tutti i valori iniziali e content-box, la larghezza del contenuto è 200px; ai lati si aggiungono 20px di padding e 4px di bordo.
- Torna in Styles, cambia box-sizing in border-box e confronta il diagramma: il contenuto si restringe a 152px.
Il diagramma mostra le dimensioni calcolate. La sua posizione può variare tra le versioni del browser; puoi anche trovarlo scorrendo il pannello degli stili.
7. Concludere la prova
- Lascia una modifica ben riconoscibile, per esempio color: red.
- Chiudi i DevTools: la modifica resta visibile in questa anteprima.
- Ricarica la pagina della lezione con il pulsante del browser oppure con Ctrl+R.
- Il testo torna al colore iniziale: la modifica era soltanto temporanea.
Risultato finale: hai sperimentato il CSS nel browser. Nessun file della pagina è stato modificato o salvato sul server.
- Controlla di essere nella scheda Styles e di avere selezionato laboratorio-box dentro l’anteprima.
- Fai doppio clic sul valore della proprietà, non sul codice nella Console.
- Se scrivi una misura, conserva l’unità: 40px, non 40.
- Se una dichiarazione è barrata, verifica che sia attiva e valida. In altri elementi del sito può essere superata da una regola con !important; questa anteprima è preparata per evitare tale interferenza.
- Per ripartire da zero, ricarica normalmente la pagina.
↑ Torna all’indice della pagina
8. Precisazioni utili
Le differenze da ricordare quando si applica il modello a elementi e layout diversi.
- Questo modello introduttivo si osserva facilmente sui blocchi. Un normale elemento inline, come span, può essere diviso tra più righe e non si comporta come un unico blocco dimensionabile con width e height.
- Il bordo può essere invisibile: senza uno stile come solid non viene disegnato un bordo visibile.
- Outline e box-shadow sono effetti visivi: non si aggiungono alle dimensioni del riquadro come il bordo.
- Margin può usare valori negativi; padding no.
- Lo sfondo non colora il margine. Un’area esterna colorata proviene normalmente dal contenitore o da un altro elemento sottostante.
- Con border-box, se padding e bordi da soli superano la dimensione dichiarata, il contenuto non diventa negativo e il riquadro può comunque risultare più grande di quella dimensione.