Ogni box è composto da quattro parti (o aree), definite dai rispettivi limiti: il limite del contenuto, il limite del padding, il limite del bordo e il limite del margine.
.png)
L'area del contenuto, circoscritta dal limite del contenuto, è dove si trova il contenuto vero e proprio dell'elemento, come testo, immagini o un video. Le sue dimensioni sono chiamate content width (o content-box width) e content height (o content-box height). Spesso ha un colore o una immagine di background.
Se la proprietà box-sizing è impostata su content-box ( valore di default), le dimensioni dell'area del contenuo si possono definire esplicitamente con le proprietà width, min-width, max-width, height, min-height, e max-height.
L'area del padding, circoscritta dal limite del padding, estende l'area del contenuto per includere il padding dell'elemento. Le sue dimensioni sono chiamate padding-box width e padding-box height. Se l'area del contenuto ha un background, il background si estende all'area del padding.
lo spessore del padding è determinato tramite le proprietà padding-top, padding-right, padding-bottom, padding-left, o usando la forma abbreviata padding.
L'area del bordo, circoscritta dal limite del bordo, estende l'area del padding per includere i bordi dell'elemento. Le sue dimensioni sono chiamate border-box width e border-box height.
Lo spessore dei bordi è determinato tramite la proprietà border-width, o usando la forma abbreviata border. Se la proprietà box-sizing è impostata su border-box, le dimensioni dell'area del bordo possono essere definite esplicitamente usando le proprietà width, min-width, max-width, height, min-height, e max-height.
L'area del margine, circoscritta dal limite del margine, estende l'area del bordo per includere uno spazio vuoto usato per separare l'elemento dagli elementi vicini. Le sue dimensioni sono chiamate margin-box width e margin-box height.
Le dimensioni dell'area del margine sono determinate tramite le proprietà margin-top, margin-right, margin-bottom, margin-left, o usando la forma abbreviata margin. Quando si verifica un caso di margini che collassano (margin collapsing), l'area del margine non è più chiaramente definita, perché i margini di due differenti box vengono condivisi.
Infine, si noti come negli elementi non-replaced (ossia elementi che hanno il contenuto inserito nell'HTML tra l'etichetta di apertura e chiusura dell'elemento, come <span>contenuto</span> anziché derivare il contenuto da una fonte esterna come src per le etichette <img>) e con disposizione in linea (inline), la quantità di spazio che occupano (il loro contributo all'altezza della linea) è determinato dalla proprietà line-height, anche se i bordi e il padding sono comunque mostrati attorno al contenuto.
Specifiche
| Specifiche | Stato | Commenti |
|---|---|---|
| CSS Level 2 (Revision 1) | Recommendation | Descrizione più precisa, ma nessun cambio a livello pratico. |
| CSS Level 1 | Recommendation | Definizione iniziale. |
Vedi anche
- Guida di riferimento CSS
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.
- Proprietà CSS relazionate:
box-sizing,background-clip,height,max-height,min-height,width,max-height,min-height,padding,padding-top,padding-right,padding-bottom,padding-left,border,border-top,border-right,border-bottom,border-left,border-width,border-top-width,border-right-width,border-bottom-width,border-left-width,margin,margin-top,margin-right,margin-bottom,margin-left