Modello di盒子CSS

Il modello di scatola CSS descrive come posizionare intuitivamente gli elementi sul sito web.

Cos'è il modello di scatola

Ogni elemento visibile può contenere uno o più rettangoli. Il modello di scatola CSS descrive generalmente come posizionare questi rettangoli sul sito web. Questi rettangoli possono avere diverse proprietà e possono interagire tra loro in modi diversi, ma ogni scatola ha un'area di contenuto e margini opzionali, margini e bordi.

La seguente figura dimostra come i CSS attributi margin, padding e border determinano lo spazio occupabile dall'elemento sul sito web.

Larghezza e altezza dell'elemento

Di solito, quando si utilizza CSS widtheheightQuando si impostano le proprietà width e height di un elemento, in realtà si sta impostando solo la larghezza e l'altezza dell'area del contenuto dell'elemento. La larghezza e l'altezza effettive della scatola dell'elemento dipendono da diversi fattori.

L'area effettiva che l'elemento della scatola può occupare è calcolata in questo modo:

Nelle sezioni successive vengono fornite le modalità di utilizzo di diversi attributi.