Il modello a gabbie (CSS Box Model) è un potente strumento di impaginazione grafica. In pratica viene creata una gabbia intorno ad ogni sezione del documento che si troverà all' interno di un tag <div>.
Ogni gabbia ha un certo numero di proprietà che si possono manipolare attraverso i Fogli di Stile. Si osservi la figura seguente:
La gabbia di contenimento, inizialmente, circonda il nostro contenuto. Si può definire la sua altezza e larghezza oppure fare in modo che il browser decida le dimensioni in base a "quanto" contenuto ci sia all' interno, in base alla porzione di video a sua disposizione (di solito la finestra stessa del browser), o in base ad una quantità di fattori dipendenti dalla complessità dell' impaginato.
Si può "spingere" il confine esterno della gabbia fuori dal contenuto, aggiungendo un pò di spazio (padding); si può aggiungere un pò di padding tutt' intorno al contenuto o solo individualmente, cioè solo in alto, in basso, a destra o a sinistra. Intorno a questa spaziatura possiamo aggiungere un bordo (border). Il confine esterno rappresenta il margine esterno del bordo. I CSS permettono di definire lo spessore, il tipo e il colore del margine per tutti i lati o per uno specifico. I tipi di bordo che si possono avere sono: a linea continua (solid), a puntini (dotted) e tratteggiato (dashed).
Un margine può essere aggiunto intorno al border per tenere lontani da esso elementi esterni. Serve anche per estendere il confine esterno della gabbia e può essere applicato tutto intorno o solo su alcuni lati del box. Si può anche decidere di utilizzare solo margini (Top, Right, Bottom e Left) oppure border o padding. L' uso di uno di questi non richiede necessariamente l' uso degli altri.
Da notare che, a prescindere dalla quantità di margini, bordi o spaziatori che si vogliono aggiungere, l'area interna del contenuto avrà ancora le dimensioni di larghezza e altezza definite. I confini esterni della gabbia sono il risultato della somma della dimensione dell'area del contenuto più qualsiasi altro spaziatore, bordo e margine.
Se "disegniamo" una gabbia del genere:
#box{
width:300px;
padding:10px;
border:1px solid #f00;
margin:20px;
}
la larghezza totale, da una parte esterna all' altra sarà:
20px + 1px + 10px + 300px + 10px + 1px + 20px. Uguale a 362px. Questo "conteggio" della larghezza del box, a primo acchito, non appare molto intuitivo. Vediamo il perchè.
La larghezza dichiarata di 300px non viene misurata tra i confini esterni o tra i bordi visibili. Rappresenta solo l' area del contenuto. Quando un colore o una immagine ".gif" vengono applicati ad un box, riempiono lo spazio tra i confini esterni. C'è un' altra caratteristica del box model alla quale porre molta attenzione: laddove le gabbie fossero impilate verticalmente e i loro margini - top e bottom - si dovessero toccare, si sovrapporrebbero; cosa che, nella terminologia CSS, viene definito collassare.
La distanza tra i bordi di questi elementi non rappresenterà la somma di entrambi i margini, ma solo la dimensione dei margini più esterni.
Al contrario dei margini esterni, quelli laterali non collassano, ma si comportano come ci si aspetta. La distanza tra i bordi laterali sarà data dalla somma dei margini adiacenti. Queste qui descritte sono le caratteristiche di base del box model. Con il prosieguo degli articoli, si scenderà più nel dettaglio della sintassi di queste regole e sarà mostrato come ottenere set di gabbie per l'impaginazione.