Il modello di layout della casella CSS, noto anche come Box Model, è un concetto fondamentale in CSS che stabilisce come i diversi elementi di una pagina web interagiscono e si organizzano nello spazio. Ogni elemento sul documento è considerato come una casella e può avere proprieta’ come margini, bordi, padding e il contenuto effettivo.
- Contenuto (Content): è la zona che contiene il testo o l’immagine nel box, dove viene visualizzato il contenuto vero e proprio.
- Padding: è lo spazio tra il contenuto del box e il bordo. Questo aumenta la dimensione del box ma mantiene lo stesso background del contenuto.
- Bordo (Border): è una linea che circonda il padding e il contenuto.
- Margine (Margin): è lo spazio tra le caselle. Vale a dire, rappresenta la distanza tra questo oggetto e gli oggetti attorno a esso.
Questi quattro elementi costituiscono il modello di layout della casella in CSS, e la manipolazione di ciascuno di questi elementi può avere un impatto significativo sulla disposizione generale di un sito web.