Il Box Model
Il Box Model è un concetto che, in ambito CSS, racchiude la stilizzazione di elementi definibili "box" (scatole) come tabelle, elementi di testo ed elenchi.
A livello pratico il Box Model riguarda la gestione dei bordi, della spaziatura interna ed esterna degli elementi di tipo "box" utilizzando le proprietà in base border, padding e margin.
Ognuna delle tre proprietà ha una serie di sfaccettature per la gestione specifica di singole porzioni, di propria competenza, di un "box".
Esaminarle tutte è abbastanza dispendioso e dispersivo e, per altro, la maggior parte di queste non vengono utilizzate di frequente.
Esaminiamo dunque le proprietà principali per la gestione del Box Model, iniziando da un semplice esempio:
div
{
font-size: 11px;
font-family: verdana;
}
div.BOX
{
padding: 5px 5px 5px 5px;
margin: 0px 0px 10px 0px;
border: solid 1px #000000;
}
Dopo aver definito uno stile di default all'elemento di testo scelto, creiamo una classe per quello specifico elemento a cui diamo nome BOX.
La proprietà padding specifica una spaziatura interna di 5 pixel su tutti e quattro i lati; la proprietà margin imposta una spaziatura esterna di 10 pixel solo verso il basso; la proprietà border imposta un bordo semplice di 1 pixel, di colore nero, a tutti e quattro i lati del "box".
La definizione dei lati sia per padding che per margin rispetta la stessa sequenza:
padding: top right bottom left; margin: top right bottom left;La sequenza è dunque oraria.
E' possibile definire un singolo lato su cui far agire il padding ed il margin specificando, come nell'esempio che segue, il lato su cui agire:
padding-top: ...; padding-right: ...; padding-bottom: ...; padding-left: ...;oppure:
margin-top: ...; margin-right: ...; margin-bottom: ...; margin-left: ...;Lo stesso vale anche per border:
border-top: ...; border-right: ...; border-bottom: ...; border-left: ...;La proprietà border specifica, in sequenza, i seguenti elementi:
border: type width color;Il "type" di un border può assumere i seguenti valori:
none dotted dashed double groove ridge inset outset solidLi si provi per verificarne il risultato.
Il "width" (larghezza) può assumere valore di tipo px, em o percentuale, mentre il colore viene definito in esadecimale.
