Box Model

Il box model comprende un insieme di proprietà utilizzate per creare spazio intorno e tra gli elementi HTML.

L'altezza e la larghezza di un'area di contenuto possono essere impostate in pixel o in percentuale.

I bordi circondano l'area di contenuto ed il padding di un elemento. Il colore, lo stile e lo spessore di un bordo possono essere impostati con le proprietà CSS.

Il padding è lo spazio tra l'area di contenuto e il bordo. Può essere impostato in pixel o in percentuale.

Margin è la quantità di spaziatura al di fuori del bordo di un elemento.

I margini orizzontali si aggiungono, quindi lo spazio totale tra i bordi degli elementi adiacenti è uguale alla somma del margine destro di un elemento e del margine sinistro dell'elemento adiacente.

I margini verticali collassano, quindi lo spazio tra gli elementi verticalmente adiacenti è uguale al margine maggiore.

margin: 0 autocentra orizzontalmente un elemento all'interno dell'area di contenuto del genitore, se questo ha una larghezza.

La proprietà overflow imposta come l'HTML visualizzerà il contenuto che trabocca dall'area di contenuto del suo genitore. Se farlo vedere, o meno.

La proprietà visibility può nascondere o mostrare elementi.

Collasso dei margini

Il collasso del margine nei CSS si verifica quando i margini superiore e inferiore dei blocchi vengono combinati in un unico margine pari al margine del singolo blocco più grande.

Il collasso dei margini si verifica solo con i margini verticali, non per i margini orizzontali.

.uno {
margin: 20px;
}

.due {
margin: 30px;
}

Parola chiave auto

Il valore auto può essere usato con la proprietà margin per centrare orizzontalmente un elemento all'interno del suo contenitore. La proprietà margin prenderà la larghezza dell'elemento e dividerà il resto dello spazio in parti uguali tra il margine sinistro e quello destro.

div {
margin: auto;
}

Overflow

Se il contenuto è troppo grande per il suo contenitore, la proprietà CSS overflow determina come il browser gestisce il problema.

Per impostazione predefinita sarà impostato su visible e il contenuto occuperà spazio extra.

Può anche essere impostato su hidden o su scroll, il che renderà il contenuto in overflow accessibile tramite barre di scorrimento all'interno del contenitore originale.

blocco-uno {
overflow: scroll;
}

Height e width, min e max

Le proprietà CSS min-width e min-height possono essere utilizzate per impostare una larghezza e un'altezza minima della "scatola" di un elemento. Le proprietà CSS max-width e max-height possono essere utilizzate per impostare le larghezze e le altezze massime delle "scatole" degli elementi.

.col {
max-width: 100px;
width: 300px;
}

Visibility

La proprietà CSS visibility viene utilizzata per rendere gli oggetti nascosti invisibili all'utente, senza rimuoverli dalla pagina. Questo assicura che la struttura e l'organizzazione della pagina rimangano invariate.

.invisi {
visibility: hidden;
}

Box-sizing

Il modello CSS box model è una scatola che avvolge un elemento HTML e controlla il design e il layout.

La proprietà box-sizing controlla quale aspetto della scatola è determinato dalle proprietà di altezza e larghezza.

Il valore predefinito di questa proprietà è content-box, che rende la dimensione effettiva dell'elemento, compreso il box del contenuto; ma non il padding ed i bordi. Il valore border-box, invece, rende la dimensione reale di un elemento che include il content box, il padding ed i bordi.

Il valore border-box è consigliato quando è necessario ridimensionare il padding ed il bordo, non solo il contenuto.