Ogni elemento è una scatola
In CSS, ogni elemento HTML è una “scatola” composta da quattro parti, dall’interno verso l’esterno:
- Content — il contenuto (testo, immagine)
- Padding — spaziatura interna, tra il contenuto e il bordo
- Border — il bordo della scatola
- Margin — spaziatura esterna, verso gli elementi vicini
Bordi
div {
border-width: 2px;
border-style: solid; /* solid | dashed | dotted | none */
border-color: #333;
}
/* forma abbreviata (shorthand), equivalente alle tre righe sopra */
div {
border: 2px solid #333;
}
Margini e padding
p {
margin: 20px; /* spaziatura ESTERNA, verso gli altri elementi */
padding: 15px; /* spaziatura INTERNA, tra contenuto e bordo */
}
Entrambi accettano valori per singolo lato:
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* forma abbreviata: sopra destra sotto sinistra (senso orario) */
margin: 10px 20px 10px 20px;
}
Una scorciatoia comune: margin: 10px 20px; imposta 10px sopra/sotto e 20px destra/sinistra.
Dimensioni
div {
width: 300px;
height: 200px;
max-width: 100%; /* non superare mai la larghezza del contenitore: utile per la responsività */
}
box-sizing: la proprietà che risolve un problema comune
Per default (content-box), width e height si riferiscono solo al contenuto: se aggiungi padding e bordo, la scatola diventa più grande di quanto avevi previsto. Ecco perché quasi ogni progetto CSS moderno imposta:
* {
box-sizing: border-box;
}
Con border-box, width e height includono anche padding e bordo: la dimensione totale della scatola resta quella che hai dichiarato, e i calcoli diventano molto più prevedibili. È una delle prime righe che troverai in quasi ogni foglio di stile professionale.
Outline
outline disegna un contorno fuori dal bordo, senza influenzare le dimensioni della scatola (a differenza del border, non “spinge” gli altri elementi):
input:focus {
outline: 2px solid dodgerblue;
}
È molto usato per evidenziare l’elemento attivo (focus), specialmente per l’accessibilità da tastiera — non rimuoverlo mai del tutto senza sostituirlo con un’alternativa visibile.
Esercitazione pratica
Costruisci 3 “card” (riquadri) affiancate con bordo, padding interno e margine tra loro. Applica box-sizing: border-box e verifica come cambia la dimensione finale rispetto a content-box.