Autore: Bocchi Cinzia

Ultimo aggiornamento: 20/12/2013

1
Gestione degli elementi di blocco con i CSS
Ogni elemento di blocco HTML genera uno o pi riquadri rettangolari denominati riquadri
elemento. Ogni riquadro elemento ha al centro unarea di contenuto. Larea di contenuto
circondata da quantit facoltative di padding, bordi e margini. Ogni margine, bordo o
padding si pu impostare utilizzando diverse propriet. Tutti questi elementi (si veda la
figura 1) si considerano facoltativi perch si possono impostare con una larghezza zero,
eliminandoli dal riquadro elemento.


LEGENDA


Area di contenuto

Padding

Margini


Fig. 1 Riquadri di un elemento html

Il padding lo spazio, eventualmente nullo, tra il contenuto e i bordi. Il margine, invece,
definisce lo spazio, eventualmente nullo, esterno ai bordi.
Inoltre, con i CSS si possono specificare altezza e larghezza di ogni elemento di blocco
1
.

Larghezza di un elemento di blocco

Nel definire la larghezza dellelemento di blocco bisogna distinguere tra la larghezza
dell'area del contenuto e la larghezza effettiva del blocco. La prima data dal valore della
propriet width. La seconda data da questa somma:

margine sin + bordo sin + padding sin + larghezza contenuto + padding des + bordo des + margine des

Altezza di un elemento di blocco
Laltezza predefinita di un elemento determinata dal suo contenuto. Laltezza inoltre
influenzata dalla larghezza del contenuto: pi un paragrafo si restringe pi deve diventare
alto per ospitare tutto il contenuto presente al suo interno.
Nel definire laltezza dellelemento di blocco bisogna distinguere tra laltezza dell'area del
contenuto e laltezza effettiva del blocco . La prima data dal valore della propriet
height. La seconda data da questa somma:

1
Le propriet di larghezza e altezza non hanno effetto sugli elementi HTML inline.



Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
2

margine sup + bordo sup + padding sup + altezza contenuto + padding inf + bordo inf + margine inf


Nelle seguenti tabelle sono riepilogate le propriet per la gestione degli elementi di blocco.

Dimensioni

Propriet


Descrizione
width Imposta la larghezza di un elemento.
max-width Imposta la larghezza massima di un elemento.
min-width Imposta la larghezza minima di un elemento.
height Imposta laltezza di un elemento.
max-height Imposta laltezza massima di un elemento.
min-height Imposta laltezza minima di un elemento.

width
Imposta la larghezza dellarea di contenuto di un elemento di blocco.


selettore {width: larghezza;}


dove larghezza pu assumere i seguenti valori:
auto (il default);
una lunghezza con relativa unit di misura;
la percentuale rispetto al blocco contenitore
inherit.

Il valore inherit specifica che la larghezza (o in generale la propriet) viene ereditata
dallelemento genitore.

max-width
Imposta la larghezza massima dellarea di contenuto di un elemento di blocco, impedendo
che il blocco si estenda oltre la dimensione fissata. Tale valore, se specificato, sovrascrive
la larghezza impostata con width.


selettore {max-width: larghezza_max;}


dove larghezza_max pu assumere i seguenti valori:
none (il default), cio nessuna larghezza massima;
una lunghezza con relativa unit di misura;
la percentuale rispetto al blocco contenitore
inherit.



Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
3

min-width
Imposta la larghezza minima dellarea di contenuto di un elemento di blocco, impedendo
che il blocco si riduca pi della dimensione fissata. Tale valore, se specificato, sovrascrive
la larghezza impostata con width e con max-width.


selettore {min-width: larghezza_min;}


dove larghezza_min pu assumere i seguenti valori:
0 (il default);
una lunghezza con relativa unit di misura;
la percentuale rispetto al blocco contenitore
inherit.

height
Imposta laltezza dellarea di contenuto di un elemento di blocco.


selettore {height: altezza;}


dove altezza pu assumere i seguenti valori:
auto (il default);
unaltezza con relativa unit di misura;
la percentuale rispetto al blocco contenitore
inherit.

max-height
Imposta laltezza massima dellarea di contenuto di un elemento di blocco, impedendo che
il blocco si estenda oltre la dimensione fissata. Tale valore, se specificato, sovrascrive
laltezza impostata con height.


selettore {max-height: altezza_max;}


dove altezza_max pu assumere i seguenti valori:
none (il default), cio nessuna altezza massima;
una lunghezza con relativa unit di misura;
la percentuale rispetto al blocco contenitore
inherit.






Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
4
min-height
Imposta laltezza minima dellarea di contenuto di un elemento di blocco, impedendo che il
blocco si riduca pi della dimensione fissata. Tale valore, se specificato, sovrascrive la
larghezza impostata con height e con max-height.


selettore {max-height: altezza_min;}


dove altezza_min pu assumere i seguenti valori:
0 (il default);
una lunghezza con relativa unit di misura;
la percentuale rispetto al blocco contenitore
inherit.



Bordi

Le propriet dei bordi consentono di definire, per tutti e 4 i bordi:
- il colore (border-color),
- lo stile (border-style),
- lo spessore (border-width).

Esistono, inoltre, regole CSS che consentono di agire anche solo:
- sul bordo superiore (border-top-color, border-top-style, border-top-width),
- sul bordo destro (border-right-color, border-right-style, border-right-widt),
- sul bordo inferiore (border-bottom-color, border-bottom-style, border-bottom-width),
- sul bordo sinistro (border-left-color, border-left-style, border-left-width).

Infine, si possono utilizzare le propriet abbreviate, mediante le quali possibile impostare
le caratteristiche dei bordi con ununica regola CSS:
- border,
- border-top
- border-right,
- border-bottom,
- border-left.

Le propriet elencate hanno effetto su tutti gli elementi, anche quelli inline.


Propriet


Descrizione
border-color Imposta il colore dei 4 bordi di un elemento.
border-top-color Imposta il colore del bordo superiore.
border-right-color Imposta il colore del bordo destro.
border-bottom-color Imposta il colore del bordo inferiore.



Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
5
border-left-color Imposta il colore del bordo sinistro.
border-style Imposta lo stile dei bordi.
border-top-style Imposta lo stile del bordo superiore.
border-right-style Imposta lo stile del bordo destro.
border-bottom-style Imposta lo stile del bordo inferiore.
border-left-style Imposta lo stile del bordo sinistro.
border-width Imposta laltezza minima di un elemento.
border-top-width Imposta lo spessore del bordo superiore.
border-right-width Imposta lo spessore del bordo destro.
border-bottom-width Imposta lo spessore del bordo inferiore.
border-left-width Imposta lo spessore del bordo sinistro.
border Imposta le stesse propriet di spessore, stile e colore per tutti i bordi.
border-top Imposta le propriet di spessore, stile e colore per il bordo superiore.
border-right Imposta le propriet di spessore, stile e colore per il bordo destro.
border-bottom Imposta le propriet di spessore, stile e colore per il bordo inferiore.
border-left Imposta le propriet di spessore, stile e colore per il bordo sinistro.

border-top-color, border-right-color, border-bottom-color, border-left-
color
Imposta rispettivamente il colore del bordo superiore, destro, inferiore, sinistro.


selettore {border-top-color: colore;}

selettore {border-right-color: colore;}

selettore {border-bottom-color: colore;}

selettore {border-left-color: colore;}


dove colore pu assumere i seguenti valori:
black (il default);
un qualsiasi colore valido;
transparent;
inherit.




Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
6
border- color
Imposta il colore dei quattro bordi. Pu assumere una delle seguenti forme:


selettore {border-color: top_color, right_color, bottom_color, left_color;}

selettore {border-color: top_color, right&left_color, bottom_color;}

selettore {border-color: top&bottom_color, right&left_color;}

selettore {border-color: top&right&bottom&left_color;}


dove ciascun colore pu assumere uno dei valori visti al punto precedente.

- La prima forma consente di indicare colori distinti per i 4 bordi, partendo da quello
superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco.
- La seconda forma pu essere utilizzata quando il colore dei bordi destro e sinistro lo
stesso.
- La terza forma viene utilizzata per esprimere solo due differenti colori, da attribuire alle
coppie di bordi superiore-inferiore e destro-sinistro.
- Lultima forma applica lo stesso colore a tutti i bordi.

border-top-style, border-right- style, border-bottom- style, border-left-
style
Imposta rispettivamente lo stile del bordo superiore, destro, inferiore, sinistro.


selettore {border-top-style: stile;}

selettore {border-right-style: stile;}

selettore {border-bottom-style: stile;}

selettore {border-left-style: stile;}


dove stile pu assumere i seguenti valori:
none (il default), cio nessuno stile;
hidden, come none ad eccezione delle tabelle;
dotted, a linea punteggiata;
dashed,a linea tratteggiata;
solid, a linea piena;
double, a linea doppia;
groove, con effetto tridimensionale;
ridge, con effetto tridimensionale;
inset, con effetto tridimensionale;
outset, con effetto tridimensionale;



Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
7
inherit.

Si veda lesempio alla pagina http://www.w3schools.com/css/css_border.asp.

border- style
Imposta lo stile dei quattro bordi. Pu assumere una delle seguenti forme:


selettore {border-style: top_style, right_style, bottom_style, left_style;}

selettore {border-style: top_style, right&left_style, bottom_style;}

selettore {border-style: top&bottom_style, right&left_style;}

selettore {border-style: top&right&bottom&left_style;}


dove ciascuno stile pu assumere uno dei valori visti al punto precedente.

- La prima forma consente di indicare stili distinti per i 4 bordi, partendo da quello
superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco.
- La seconda forma pu essere utilizzata quando lo stile dei bordi destro e sinistro lo
stesso.
- La terza forma viene utilizzata per esprimere solo due differenti stili, da attribuire alle
coppie di bordi superiore-inferiore e destro-sinistro.
- Lultima forma applica lo stesso stile a tutti i bordi.

border-top-width, border-right- width, border-bottom- width, border-
left- width
Imposta rispettivamente lo spessore del bordo superiore, destro, inferiore, sinistro.


selettore {border-top-width: spessore;}

selettore {border-right-width: spessore;}

selettore {border-bottom-width: spessore;}

selettore {border-left-width: spessore;}


dove spessore pu assumere i seguenti valori:
medium (il default), medio spessore;
thin, sottile;
thick, spesso;
una lunghezza con relativa unit di misura;
inherit.




Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
8
border- width
Imposta lo spessore dei quattro bordi. Pu assumere una delle seguenti forme:


selettore {border-width: top_width, right_width, bottom_width, left_width;}

selettore {border-width: top_width, right&left_width, bottom_width;}

selettore {border-width: top&bottom_width, right&left_width;}

selettore {border-width: top&right&bottom&left_width;}


dove ciascuno spessore pu assumere uno dei valori visti ai punti precedenti.

- La prima forma consente di indicare spessori distinti per i 4 bordi, partendo da quello
superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco.
- La seconda forma pu essere utilizzata quando lo spessore dei bordi destro e sinistro
lo stesso.
- La terza forma viene utilizzata per esprimere solo due differenti spessori, da attribuire
alle coppie di bordi superiore-inferiore e destro-sinistro.
- Lultima forma applica lo stesso spessore a tutti i bordi.

border- top
Propriet abbreviata che imposta lo spessore, lo stile e il colore del bordo superiore.


selettore {border-top: top_width, top_style, top_color;}


Lo spessore (width), lo stile (style) e il colore (color) possono assumere uno dei valori visti
in precedenza.

I valori espressi devono comparire nellordine indicato. Se un valore mancante, viene
utilizzato il valore di default.

border- right
Propriet abbreviata che imposta lo spessore, lo stile e il colore del bordo destro.


selettore {border-right: right_width, right_style, right_color;}


Lo spessore (width), lo stile (style) e il colore (color) possono assumere uno dei valori visti
in precedenza.

I valori espressi devono comparire nellordine indicato. Se un valore mancante, viene
utilizzato il valore di default.




Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
9
border- bottom
Propriet abbreviata che imposta lo spessore, lo stile e il colore del bordo inferiore.


selettore {border-bottom: bottom_width, bottom_style, bottom_color;}


Lo spessore (width), lo stile (style) e il colore (color) possono assumere uno dei valori visti
in precedenza.

I valori espressi devono comparire nellordine indicato. Se un valore mancante, viene
utilizzato il valore di default.

border- left
Propriet abbreviata che imposta lo spessore, lo stile e il colore del bordo sinistro.


selettore {border-left: left_width, left_style, left_color;}


dove lo spessore (width), lo stile (style) e il colore (color) possono assumere uno dei valori
visti in precedenza.

I valori espressi devono comparire nellordine indicato. Se un valore mancante, viene
utilizzato il valore di default.

border
Propriet abbreviata che imposta lo spessore, lo stile e il colore dei bordi agli stessi valori.


selettore {border: spessore, stile, colore;}


dove lo spessore, lo stile e il colore possono assumere uno dei valori visti in precedenza.

I valori espressi devono comparire nellordine indicato. Se un valore mancante, viene
utilizzato il valore di default.


Padding

Le propriet di padding possono essere impostate in modo differente per ogni lato
dellelemento:
- superiore (padding-top),
- destro (padding-right),
- inferiore (padding-bottom),
- sinistro (padding-left).




Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
10
Inoltre, si pu utilizzare la propriet abbreviata padding per impostare il padding con
ununica regola CSS.

Le propriet elencate hanno effetto su tutti gli elementi, anche quelli inline.


Propriet


Descrizione
padding-top Imposta il padding del lato superiore.
padding-right Imposta il padding del bordo destro.
padding-bottom Imposta il padding del bordo inferiore.
padding-left Imposta il colore del bordo sinistro.
padding Imposta il padding dei 4 lati di un elemento.

padding-top
Imposta il padding del lato superiore dellelemento.


selettore {padding-top: padding;}


dove padding pu assumere i seguenti valori:
0 (il default);
una lunghezza con relativa unit di misura;
un valore percentuale calcolato rispetto allelemento contenitore;
inherit.

Non sono ammessi valori negativi.

padding-right
Imposta il padding del lato destro dellelemento.


selettore {padding-right: padding;}


dove padding pu assumere gli stessi valori indicati per padding-top.

padding-bottom
Imposta il padding del lato inferiore dellelemento.


selettore {padding-bottom: padding;}


dove padding pu assumere gli stessi valori indicati per padding-top.



Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
11
padding-left
Imposta il padding del lato sinistro dellelemento.


selettore {padding-left: padding;}


dove padding pu assumere gli stessi valori indicati per padding-top.

padding
Imposta il padding dei quattro lati mediante ununica regola. Pu assumere una delle
seguenti forme:


selettore {padding: top_padding, right_padding, bottom_padding, left_padding;}

selettore {padding: top_padding, right&left_padding, bottom_padding;}

selettore {padding: top&bottom_padding, right&left_padding;}

selettore {padding: top&right&bottom&left_padding;}


dove ciascun padding pu assumere uno dei valori visti in precedenza.

- La prima forma consente di indicare padding distinti per i 4 lati, partendo da quello
superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco.
- La seconda forma pu essere utilizzata quando il padding dei lati destro e sinistro lo
stesso.
- La terza forma viene utilizzata per esprimere solo due differenti padding, da attribuire
alle coppie di lati superiore-inferiore e destro-sinistro.
- Lultima forma applica lo stesso padding a tutti i lati.


Margini

I margini di un elemento non hanno alcun colore di sfondo e sono completamente
trasparenti.
Le propriet dei margini possono essere impostate in modo differente per ogni lato
dellelemento:
- superiore (margin-top),
- destro (margin-right),
- inferiore (margin-bottom),
- sinistro (margin-left).

Inoltre, si pu utilizzare la propriet abbreviata margin per impostare il margine con
ununica regola CSS.




Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
12
Le propriet elencate hanno effetto su tutti gli elementi, anche quelli inline.


Propriet


Descrizione
margin-top Imposta il margine del lato superiore.
margin-right Imposta il margine del bordo destro.
margin-bottom Imposta il margine del bordo inferiore.
margin-left Imposta il margine del bordo sinistro.
margin Imposta il margine dei 4 lati di un elemento.

margin-top
Imposta il margine del lato superiore dellelemento.


selettore {margin-top: margine;}


dove margine pu assumere i seguenti valori:
0 (il default);
auto, il margine viene determinato automaticamente dal browser;
una lunghezza con relativa unit di misura;
un valore percentuale calcolato rispetto alla larghezza (width) dellelemento
contenitore;
inherit.

Sono ammessi valori negativi.

margin-right
Imposta il margine del lato destro dellelemento.


selettore {margin-right: margine;}


dove margine pu assumere gli stessi valori indicati per margin-top.

margin-bottom
Imposta il margine del lato inferiore dellelemento.


selettore {margin-bottom: margine;}


dove margine pu assumere gli stessi valori indicati per margin-top.




Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/12/2013
13
margin-left
Imposta il margine del lato sinistro dellelemento.


selettore {margin-left: margine;}


dove margine pu assumere gli stessi valori indicati per margin-top.

margin
Imposta il margine dei quattro lati mediante ununica regola. Pu assumere una delle
seguenti forme:


selettore {margin: top_margin, right_margin, bottom_margin, left_margin;}

selettore {margin: top_margin, right&left_margin, bottom_margin;}

selettore {margin: top&bottom_margin, right&left_margin;}

selettore {margin: top&right&bottom&left_margin;}


dove ciascun margine pu assumere uno dei valori visti in precedenza.

- La prima forma consente di indicare margini distinti per i 4 lati, partendo da quello
superiore e arrivando a quello sinistro muovendosi in senso orario sul blocco.
- La seconda forma pu essere utilizzata quando il margine dei lati destro e sinistro lo
stesso.
- La terza forma viene utilizzata per esprimere solo due differenti margini, da attribuire
alle coppie di lati superiore-inferiore e destro-sinistro.
- Lultima forma applica lo stesso margine a tutti i lati.






Riferimenti
E. A. Meyer, Cascading Style Sheets - La guida completa, Hops Libri, 2007

W3schools, http://www.w3schools.com/css/css_border.asp



Quest'opera distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo
3.0 Italia.