Box Model CSS
In CSS, il termine âmodello a scatolaâ (box model) è utilizzato quando si parla di design e layout.
Il modello a scatola CSS è essenzialmente una scatola che avvolge ogni elemento HTML. à composto da: margini, bordi, padding e il contenuto effettivo.
- Contenuto - Il contenuto della scatola, dove appare il testo e le immagini.
- Padding - Crea uno spazio intorno al contenuto. Il padding è trasparente.
- Bordo - Un bordo che circonda il padding e il contenuto.
- Margine - Crea uno spazio allâesterno del bordo. Il margine è trasparente. Il modello a scatola ci permette di aggiungere un bordo intorno agli elementi e di definire lo spazio tra gli elementi.
div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px;}
Larghezza e Altezza di un Elemento
Per impostare correttamente la larghezza e lâaltezza di un elemento in tutti i browser, è necessario capire come funziona il modello a scatola.
Quando si impostano le proprietĂ di larghezza e altezza di un elemento con CSS, si sta in realtĂ impostando la larghezza e lâaltezza dellâarea del contenuto. Per calcolare le dimensioni complete di un elemento, è necessario aggiungere anche padding, bordi e margini.
Questo elemento <div>
avrĂ una larghezza totale di 350px:
div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0;}
Ecco il calcolo:
- 320px (larghezza)
- 20px (padding sx/dx)
- 10px (bordo sx/dx)
- 0px (margine sx/dx)
- 350px (totale)