Filoweb.it

margin


FB TW whatsapp RSS FEED News letter
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 whatsapp RSS FEED News letter

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito filoweb.it 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.
X
La tua privacy è importante
Utilizziamo, senza il tuo consenso, SOLO cookies necessari alla elaborazione di analisi statistiche e tecnici per l'utilizzo del sito. Chiudendo il Cookie Banner, mediante il simbolo "X" o negando il consenso, continuerai a navigare in assenza di cookie di profilazione. More info

Tutti
Cookie tecnici
I cookie tecnici sono necessari al fine di "effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica, o nella misura strettamente necessaria al fornitore di un servizio della società dell'informazione esplicitamente richiesto dal contraente o dall'utente a erogare tale servizio" (art. 122, comma 1 del Codice privacy).
Cookie analitici di terze parti
I cookie analytics sono utilizzati al fine di valutare l'efficacia di un servizio della società dell'informazione fornito da un titolare di un sito, per progettare un sito web o contribuire a misurare il "traffico" di un sito web, ovvero il numero di visitatori ripartiti per area geografica, fascia oraria della connessione o altre caratteristiche.
Cookie di profilazione
Sono cookie che creano profili personalizzati relativi all'utente per finalità di marketing, ad esempio il retargeting o advertising sui social network.

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