guida online html5 & css3

html/css box model

Introduzione

Il box model è il modello di riferimento utilizzato dal browser per determinare la spazialità di un elemento, in quanto ne determina le dimensioni e il suo scostamento rispetto agli elementi che seguono, precedono o si affiancano.

Proprietà di layout di un elemento

width

Larghezza di un elemento occupata dai contenuti e all'interno della quale, se settato, è visibile il background.

height

Altezza di un elemento occupata dai contenuti e all'interno della quale, se settato, è visibile il background.

padding

Spaziatura dei contenuti dall'elemento stesso, all'interno della quale, non vi sono contenuti e, se settato, è visibile il background.
Il padding può essere determinato su 4 lati diversi tramite:

padding-top, padding-right, padding-bottom, padding-left

Oppure la sola proprietà padding in stenografia.

padding determinato in maniera identica su 4 lati

padding: 10px;

MODALITÀ STENOGRAFIA

padding: 10px 30% 40px 20px; (top: 10px, right: 30%, bottom: 40px, left: 20px)

border

Bordo che circonda l'elemento. Può essere definito su 4 lati diversi. Su ogni lato possono essere indicati (es. top):

border-top-width, border-top-style, border-top-color (quando non specificato il bordo assume il valore assegnato alla proprietà color)

BORDO CONTEMPORANEO SU 4 LATI

border-width: 2px;

border-style: dotted;

border-color: rgba(255,0,0,1)

IN STENOGRAFIA

border: 2px dotted rgba(255,0,0,1);

SU UN SINGOLO LATO (top) IN STENOGRAFIA

border-top:1px solid red;

margin

Spazio (trasparente) esterno all'elemento. Vale quanto detto per il padding.

La proprietà box-sizing, ovvero come viene determinata la larghezza effettiva di un elemento, quindi lo spazio destinato ai contenuti.

box-sizing: content-box

È il valore di default.

larghezza destinata ai contenuti

width

larghezza totale dell'elemento

width + padding + border

box-sizing: border-box

Semplifica notevolmente i calcoli.

larghezza destinata ai contenuti

width - border - padding

larghezza totale dell'elemento

width

Essendo una proprietà che coinvolge qualsiasi elemento, generalmente viene assegnata a tutti gli elementi contemporaneamente tramite un selettore asterisco (*).