I Margini | Guida CSS

I=20 Margini

Una delle maggiori limitazioni di HTML =E8 la mancanza di = un=20 meccanismo interno per spaziare gli elementi di un = documento. Per=20 ottenere questo risultato si =E8 ricorso negli anni ad una = serie di=20 trucchetti, magari efficaci, ma fuori dalla logica = originaria del=20 linguaggio. L'unica eccezione consisteva nella possibilit=E0 = di=20 definire una distanza tra le celle di una tabella con = l'attributo=20 cellspacing. I CSS risolvono il problema con l'uso di = una=20 serie di propriet=E0 in grado di definire con precisione la = distanza=20 tra gli elementi. Possiamo infatti definire il margine come = la=20 distanza tra il bordo di un elemento e gli elementi = adiacenti. Per=20 ulteriori chiarimenti e per la relazione tra i margini e gli = altri=20 elementi del box-model si veda la lezione Il box = model.=20

Sono cinque le propriet=E0 con cui =E8 possibile definire = un margine.=20 Quattro di esse sono singole e impostano la distanza per = ciascun=20 lato del box. L'ultima, margin, =E8 una propriet=E0 a = sintassi=20 abbreviata utile per definire con una sola dichiarazione = tutte le=20 impostazioni per i quattro lati.

margin-bottom

Definisce la distanza tra il lato inferiore di un = elemento e gli=20 elementi adiacenti. Si applica a tutti gli elementi e non = =E8=20 ereditata.

Valori

un valore numerico con unit=E0 di misura. Il = valore =E8=20 espresso in termini assoluti.=20
un valore in percentuale. Il valore =E8 = calcolato come=20 percentuale rispetto alla larghezza (width) del blocco=20 contenitore.=20
auto. E' quasi sempre corrispondente a 0. =

Ricordiamo che se per un elemento si imposta un margine = inferiore=20 ed esso si trova sopra ad un altro elemento che abbia = impostato un=20 margine superiore, la distanza tra i due sar=E0 quella = maggiore e non=20 data dalla somma delle due propriet=E0 (meccanismo del = margin=20 collapsing).

Esempi

p {margin-bottom: 10px;}
div.box = {margin-bottom:=20 20%;}

margin-left

Definisce la distanza tra il lato sinistro di un elemento = e gli=20 elementi adiacenti. Si applica a tutti gli elementi e non = =E8=20 ereditata.

Valori

un valore numerico con unit=E0 di misura.=20
un valore in percentuale.
auto.

Esempi

h1 {margin-left: 10%;}
img = {margin-left:=20 20px;}

margin-top

Definisce la distanza tra il lato superiore di un = elemento e gli=20 elementi adiacenti. Si applica a tutti gli elementi e non = =E8=20 ereditata.

Valori

un valore numerico con unit=E0 di misura.=20
un valore in percentuale.
auto.

Esempi

p.box {margin-top: 10%;}
img = {margin-top:=20 20px;}

margin-right

Definisce la distanza tra il lato destro di un elemento e = gli=20 elementi adiacenti. Si applica a tutti gli elementi e non = =E8=20 ereditata.

Valori

un valore numerico con unit=E0 di misura.=20
un valore in percentuale.
auto.

Esempi

h1 {margin-right: 10%;}
img = {margin-right:=20 20px;}

margin

E' una propriet=E0 a sintassi abbreviata. Con essa =E8 = possibile=20 specificare i valori per tutti e quattro i lati di un = elemento. Si=20 applica a tutti gli elementi e non =E8 ereditata.

Valori

un valore numerico con unit=E0 di misura.=20
un valore in percentuale.
auto. Per la propriet=E0 margin il valore auto = significa=20 che la distanza sar=E0 automaticamente calcolata rispetto = alla=20 larghezza dell'elemento contenitore.

Per usare al meglio questa propriet=E0 =E8 fondamentale = conoscere le=20 regole che ne gestiscono il funzionamento.

In prima istanza =E8 ovvio usare per essa quattro valori, = uno per=20 ciascun lato:

div {margin: 10px 15px 10px 20px;}

L'ordine di lettura va inteso in senso orario. Per cui: = il primo=20 valore si riferisce al lato superiore, il secondo a quello = destro,=20 il terzo al lato inferiore, il quarto a quello sinistro. In = pratica=20 usare la sintassi vista nell'esempio equivale a = scrivere:

div {
margin-top: 10px; =
margin-right:=20 15px;
margin-bottom: 10px;
margin-left: 20px; }

Nella definizione dei valori, inoltre, =E8 possibile = mischiare=20 percentuali con valori assoluti in unit=E0 di misura.

Un ulteriore abbreviazione della = sintassi si=20 pu=F2 ottenere usando tre, due o un solo valore. Queste le = regole:

se si usano tre valori, il primo si riferisce al = margine=20 superiore, il secondo a quelli sinistro e destro, il terzo = a=20 quello inferiore=20
se si usano due valori, il primo si riferisce ai lati=20 superiore e inferiore, il secondo al sinistro e al destro=20
se si usa un solo valore, un uguale distanza sar=E0 ai = quattro=20 lati

Un uso interessante del valore auto per i lati = sinistro e=20 destro =E8 quello che consente di centrare in tal modo un = elemento=20 rispetto alla pagina o al box contenitore. Per un esempio di = questa=20 applicazione e di tutte le altre propriet=E0 si veda il documento di esempio.

Esempi

p {margin: 20px 10px;}
div {margin: = 20px;}
h1=20 {margin: 10px auto;}

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =