Filoweb.it

margin


FB TW G+ whatsapp RSS FEED
CSS
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;} 
FB TW G+ whatsapp RSS FEED

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.
Brunelli Filippo declina ogni responsabilità per l'uso che viene fatto delle informazioni presenti nel sito.
FILOWEB.it Piccolo quaderno degli appunti. Argomento: CSS, Titolo:margin. Altri script riguardano: CSS, Jscript, .net, Classic Asp, HTML, Jquery, varie, url rewrite, pagina protetta da password, ecc. Altro su https://www.filoweb.it