Introduzione al box model

Il contenuto di una pagina è piazzato dentro ‘scatole’ chiamate in inglese ‘boxes’.
Queste scatole possono a loro torno contenere altre ‘boxes’ che siano elementi di blocco o online.

Questi blocchi altro il contenuto stesso possono essere costituiti di margine (margin), spazi cuscinetti (padding) e bordi (border) gestiti dalle seguente regole css:

• margin: il spazio trasparente tra il box e altri box in unità di misura o percentuale
• padding: il spazio tra il contenuto e il bordo del box in unità di misura o percentuale
• border: il bordo decorativo attorno il box in unità di misura o percentuale

NB: margin, padding e border possono essere specificate individualmente a destra, sinistra, inferiore e superiore con l’aggiunto di right, left, top o bottom (es: margin-top, padding-left, border-bottom…)

Il contenuto stesso può avere una larghezza e/o altezza specifica con:

• width: la larghezza in unità di misura (fisso) o percentuale (fluido)
• height: l’altezza in unità di misura (fisso) o percentuale (fluido)

Il nostro box può finalmente avere uno sfondo decorativo con la proprietà css background.

Il tutto insieme costituisce il ‘box model’ come rappresentato di seguito:

Le regole css del esempio sono:

width:240px;
height:110px;
margin:20px;
padding:20px;
border:5px solid #FFFFFF;
background-color:#DBDBDB;

Queste ‘scatole’ possono essere combinate tra di loro per formare il layout finale di una pagina html.
Per natura, si dispongono l’una sotto l’altra e possono essere riposizionata con le proprietà css ‘float’ o ‘position‘.

Un altro box model con 2 colonne posizionate a sinistra dentro un altro blocco ‘contenitore’:

Lo stesso ‘box’ con misure e colore relative alle regole css:

Le regole css del esempio sono:

#contenitore{
width:840px; /*larghezza del contenuto del contenitore*/
margin:20px; /*margine attorno al contenitore*/
padding:20px; /*spazio tra il contenuto e il bordo del contenitore*/
background-color:#DBDBDB; /*colore di sfondo del contenitore*/
border: 5px solid #FFFFFF; /*bordo attorno il contenitore*/
}
/*stile delle 2 colonne contenute dentro il div contenitore*/
#col_1{
width:180px; /*larghezza del contenuto della colonna*/
float:left; /*spostamento a sinistra della colonna*/
margin-right:20px; /*margine a destra della colonna*/
padding:10px; /*spazio tra il contenuto e il bordo della colonna*/
background-color:#FFFFFF; /*colore di sfondo della colonna*/
}
#col_2{
width:600px; /*larghezza del contenuto della colonna*/
float:left;/*spostamento a sinistra della colonna*/
padding:10px; /*spazio tra il contenuto e il bordo della colonna*/
background-color:#FFFFFF; /*colore di sfondo della colonna*/
}

Di seguito, posterò più esempi di box model da visualizzare partendo da una unica colonna fino arrivare a layout più sviluppati usando sia unità di misura per un layout a misura fissa che percentuale per un layout fluido (che si ridimensiona con la finestra del browser) e entrambi per un layout misto.

Questi esempi di base faranno capire meglio il box model in generale e l’uso dei differente proprietà css, in più di potere essere riusato come struttura di base per la realizzazione delle vostre pagine.