:: FILOWEB.it: margin

 
		margin



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



Valori



    * un valore numerico con unità di misura.

    * un valore in percentuale.

    * auto. Per la proprietà margin il valore auto significa che la distanza sarà automaticamente calcolata rispetto alla larghezza dell' elemento contenitore.



Per usare al meglio questa proprietà è fondamentale conoscere le regole che ne gestiscono il funzionamento.



In prima istanza è ovvio usare per essa quattro valori, uno per ciascun lato:



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



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



div {

margin-top: 10px;

margin-right: 15px;

margin-bottom: 10px;

margin-left: 20px; }



Nella definizione dei valori, inoltre, è possibile mischiare percentuali con valori assoluti in unità di misura.



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



    * se si usano tre valori, il primo si riferisce al margine superiore, il secondo a quelli sinistro e destro, il terzo a quello inferiore

    * se si usano due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro

    * se si usa un solo valore, un uguale distanza sarà ai quattro lati



Un uso interessante del valore auto per i lati sinistro e destro è quello che consente di centrare in tal modo un elemento rispetto alla pagina o al box contenitore



Esempi



p {margin: 20px 10px;}

div {margin: 20px;}

h1 {margin: 10px auto;}