PROGRAMMIAMO
HTML - Stili dei blocchi
Stili dei blocchi

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).

Bordi

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ì:

#theBox
{
border-style:dotted;
border-width: thin;
}

Ricordiamo che in assenza di dichiarazione border-style, i bordi dei blocchi sono sempre assenti.

Width, height e overflow

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:

#theBox
{
width:100px;
height: 200px;
}

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:

Testo di prova per riempire il box. Testo di prova per riempire il box. Testo di prova per riempire il box. Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box. Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box. Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box. Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.

Il codice corrispondente è il seguente:

<div style="width: 300px; height: 200px; border-style:solid; border-color:red">Testo di prova per riempire il box. Testo di prova per riempire il box. Testo di prova per riempire il box.
Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.
Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.
Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.
Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.
</div>

Per modificare questo comportamento bisogna utilizzare la proprietà overflow che ha i seguenti possibili valori:

Si consideri per esempio il codice seguente:

<div style="width: 300px; height: 200px; border-style:solid; border-color:red; overflow:auto">Testo di prova per riempire il box. Testo di prova per riempire il box. Testo di prova per riempire il box.
Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.
Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.
Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.
Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.
</div>

che viene visualizzato nel seguente modo:

Testo di prova per riempire il box. Testo di prova per riempire il box. Testo di prova per riempire il box. Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box. Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box. Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box. Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.Testo di prova per riempire il box.

 

Padding

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:

box model

Per esempio un blocco con gli stili dell'esempio in figura potrebbe essere definito in questo modo:

#theBox
{
padding: 20px;
border: solid 5px;
}

Lo stile padding può essere definito con diversi valori per i diversi lati della scatola, come nel seguente esempio:

#theBox
{
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}

 

Margin

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:

<div style="width: 300px; height: 200px; margin:10px; border-style:solid; border-color:red">
Testo di prova per riempire il box1. Testo di prova per riempire il box1. Testo di prova per riempire il box1. Testo di prova per riempire il box1.
Testo di prova per riempire il box1. Testo di prova per riempire il box1. Testo di prova per riempire il box1. Testo di prova per riempire il box1.
</div>

<div style="width: 300px; height: 200px; margin:30px; border-style:solid; border-color:blue">
Testo di prova per riempire il box2. Testo di prova per riempire il box2. Testo di prova per riempire il box2. Testo di prova per riempire il box2.
Testo di prova per riempire il box2. Testo di prova per riempire il box2. Testo di prova per riempire il box2. Testo di prova per riempire il box2.
</div>

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.

Dimensioni totali di un elemento

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:

Dimensioni percentuali riferite alla larghezza (width)

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.

 

Shorthand (abbreviazioni)

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.

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it