Abbiamo visto come il layout di una pagina possa essere convenientemente suddiviso in blocchi (o boxes, scatole), ciascuna delle quali definita mediante un elemento <div> o un altro elemento di blocco.
Vediamo ora brevemente quali stili possono essere usati per definire le caratteristiche di ogni singolo blocco: alcuni di questi stili sono stati già trattati più diffusamente in altre lezioni e verranno perciò richiamati brevemente; altri invece meritano qualche spiegazione in più.
Osserviamo la figura seguente:
Qui sono rappresentati due elementi: il contenitore (all'esterno, in rosso) e il contenuto (all'interno, in giallo). Il codice HTML corrispondente potrebbe essere questo (chiamando "contenitore" il blocco esterno e "theBox" quello interno):
<div id="contenitore">
<div id="theBox">
...
</div>
<div>
Vediamo ora le proprietà del blocco interno (theBox).
Abbiamo già parlato in altra sede degli stili per definire i bordi di un elemento. Per esempio volendo definire un bordo tratteggiato sottile potremmo fare così:
Ricordiamo che in assenza di dichiarazione border-style, i bordi dei blocchi sono sempre assenti.
Abbiamo già visto che stili width e height permettono di definire le dimensioni del blocco (rispettivamente la larghezza e l'altezza). Per esempio in questo modo:
Le unità di misura possono essere espresse in pixel (px) come nell'esempio, oppure in percentuale (%), oppure ancora in em (multipli dell'attuale dimensione dei font). Osserviamo a questo proposito come la percentuale sia riferita alle dimensioni del blocco contenitore.
Se il contenuto del blocco è maggiore delle dimensioni del blocco stesso, il contenuto "esce" dai margini del blocco. Si osservi l'esempio seguente, che mostra un testo che non può essere contenuto in un blocco e dunque fuoriesce:
Il codice corrispondente è il seguente:
Per modificare questo comportamento bisogna utilizzare la proprietà overflow che ha i seguenti possibili valori:
Si consideri per esempio il codice seguente:
che viene visualizzato nel seguente modo:
Lo stile padding (letteralmente "imbottitura") specifica lo spazio che deve rimanere fra il contenuto (es. il testo) e i bordi del box. Si osservi l'esempio seguente:
Per esempio un blocco con gli stili dell'esempio in figura potrebbe essere definito in questo modo:
Lo stile padding può essere definito con diversi valori per i diversi lati della scatola, come nel seguente esempio:
Lo stile margin (margine) come mostrato nella figura precedente definisce un'area trasparente che circonda il blocco e lo separa da qualsiasi cosa che si trovi al suo esterno. Il margine diventa particolarmente importante se c'è più di un blocco all'interno di un unico contenitore, in quanto fornisce una distanza di separazione fra un blocco e l'altro.
Si consideri il seguente esempio:
che produce questa visualizzazione:
Si osservi che se due elementi hanno margini adiacenti con valori diversi (per esempio 10px e 30px come in figura) la distanza verticale di separazione fra gli elementi è pari al margine maggiore (30 px nel nostro caso).
Anche margin, come padding, può assumere valori diversi per i diversi lati del box.
Usando per margin il valore auto (margin: auto) il browser calcola esattamente il valore dei margini in modo da centrare la box all'interno del contenitore.
Si consideri come esempio l'elemento seguente:
#box { background: silver; width: 200px; border: 25px solid black; padding: 20px; margin: 5px; }
Qual è lo spazio orizzontale occupato da tale box? Occorre fare la somma seguente:
Amp. = width + left padding + right padding + left border + right border + left margin + right margin
cioè nel nostro caso:
Ampiezza = 200 + 20 + 20 + 25 + 25 + 5 + 5 = 300 px
Si osservi che width non è la dimensione totale del box, ma solo la dimensione del suo contenuto interno. Per sapere lo spazio occupato realmente occorre sommare lo spessore dei bordi, il margine e il padding, come mostrato nel calcolo precedente.
La figura seguente dovrebbe chiarire il concetto:
Le dimensioni di padding, margin e border possono essere anche specificate in modo percentuale, come nell'esempio seguente:
#box { width: 200px; height 400px; padding: 2%; margin: 5%; }
Occore però qui evidenziare una stranezza nel calcolo percentuale, che è fonte di molti errori nel posizionamento con gli stili. Quando si indicano le misure in percentuale, queste si riferiscono sempre alla dimensione orizzontale (width), anche quando il padding o il margin sono verticali.
Per essere ancora più chiari, nell'esempio precedente abbiamo
padding-left = padding-right = 0.02 * 200px = 4px
padding-top = padding-bottom = 0.02 * 200px = 4px
Sarebbe sbagliato pensare che
padding-top = padding-bottom = 0.02 * 400px = 8px
La scelta di riferire tutte le percentuali alle dimensioni orizzontali del blocco può apparire bizzarra, ma ha senso poiché in questo modo, a parità di percentuale indicata, le dimensioni sono le stesse in tutte le direzioni.
E' possibile specificare diversi stili di tipo font con un'unica istruzione (si parla in questo caso di shorthand o abbreviazione). Per quanto riguarda i bordi, rimandiamo all'apposita pagina.
Per margin possiamo scrivere:
margin:1em 0 2em 0.5em;
che equivale a:
margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
La stessa abbreviazione con il medesimo ordine può essere usata per il padding.
Sito realizzato in base al template offerto da
http://www.graphixmania.it