Il Box Model

Prerequisiti: gli argomenti delle unità precedenti.

Un elemento genera una o più scatole. Nel caso a blocco qui studiato distinguiamo contenuto, padding, bordo e margine. Il contenuto ospita testo e figli; il padding aggiunge spazio interno al bordo; il margine separa la scatola da quelle esterne. Lo sfondo normalmente si estende anche sotto il padding e il bordo secondo le regole di background-clip. Il margine resta esterno e non viene riempito dallo sfondo dell’elemento.

Con box-sizing: content-box, il valore width indica la larghezza del contenuto. Una scatola larga 240px con padding orizzontale di 20px per lato e bordi di 2px per lato occupa 284px fino al bordo esterno: 240 + 40 + 4. I margini si aggiungono all’ingombro esterno, ma non alla border box misurata come larghezza dell’elemento. Questa distinzione evita di confondere spazio occupato nel layout e dimensione dichiarata.

Con box-sizing: border-box, width include contenuto, padding e bordo. A parità di 240px dichiarati, nell’esempio restano 196px per il contenuto: 240 - 40 - 4. Il margine resta fuori. È una convenzione comoda per componenti a larghezza controllata, ma non elimina la necessità di pensare agli spazi. Regole globali con * possono estendere la convenzione; gli pseudo-elementi vanno inclusi esplicitamente se necessario.

Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Il box model</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="scatola standard">content-box</div>
<div class="scatola alternativa">border-box</div>
</body>
</html>

.scatola {
  width: 240px;
  padding: 20px;
  border: 2px solid #174a7e;
  margin-bottom: 16px;
}
.standard { box-sizing: content-box; }
.alternativa { box-sizing: border-box; }

I valori dichiarati sono uguali, ma il significato di width cambia. Il margine inferiore separa le due scatole e non contribuisce alla loro larghezza.

.scatola {
  box-sizing: border-box;
  width: 300px;
  padding: 16px;
  border: 2px solid #174a7e;
}
/* Contenuto: 300 - 32 - 4 = 264px */

Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.

Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.