Box Model CSS
Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un rettangolo.
Componenti del Box Model
- Content: il contenuto effettivo (testo, immagini)
- Padding: spazio tra contenuto e bordo
- Border: il bordo dell'elemento
- Margin: spazio esterno al bordo
box-sizing
La proprietà box-sizing cambia come vengono calcolate le dimensioni:
/* Default: width/height = solo content */
box-sizing: content-box;
/* Consigliato: width/height include padding e border */
box-sizing: border-box;
/* Applicare a tutti gli elementi */
* {
box-sizing: border-box;
}