L'attributo margin per regolare la distanza fra il box e ciò che lo circonda. Attributo margin.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 23 Oct 2014
aggiungi in preferiti  
Home    Mappa directory    Script




Margin (box):

Come per molti altri oggetti, i css permettono di utilizzare l'attributo margin anche con i box.
Il suo valore indica lo spazio che deve intercorrere fra il box e quello che lo circonda.


In pratica se proviamo a creare un box in questa posizione, l'attributo margin indicherà lo spazio fra il bordo sinistro del box dove state leggendo questo testo, lo spazio fra il bordo destro, e in verticale la distanza dal testo (sopra e sotto).

Per unità di misura che regolano il suo comportamento vi rimandiamo a questa pagina.



Per scrivere l'attributo margin, i css ci permettono di utilizzare due tecniche:
<div style="margin:5px;">
testo, immagini, altri box ecc.
</div>
In questo caso otterremo 5px da ogni lato del box.

<div style="margin:5px; 10px 15px 20px">
testo, immagini, altri box ecc.
</div>
In questo caso partiamo dal lato superiore e giriamo in senso orario, ottenendo 5px di margine da sopra, 10px di margine da destra, 15px di margine da sotto ed infine 20px di margine da sinistra.


Nel caso si decida di impostare un solo margine si possono utilizzare i seguenti attributi:
  • margin-top per il margine da sopra.
  • margin-right per il margine da destra.
  • margin-bottom per il margine da sotto.
  • margin-left per il margine da sinistra.



Conflitti fra margin:

L'attributo margin è uno dei pochi che può incontrare altri attributi simili derivanti dagli oggetti che lo circondano.
In pratica se mettiamo due box uno sopra l'altro, gli attributi margin sono quelli che dovrebbero incontrarsi per stabilire le distanze da mantenere.
In pratica non è così. In pratica l'attributo margin più grande è quello che determina la distanza da mantenere.
Vediamo un esempio pratico:
<div style="border:1px solid black; margin-bottom:100px;">
prova 1
</div>
<div style="border:1px solid black; margin-top:150px;">
prova 2
</div>
prova 1
prova 2
io sono alto 150 px, e come vedete sono la distanza che intercorre fra i due box, questo vuol dire che i due valori margin NON si sono sommati, ma quello più grosso determina la distanza.












Esempi margin:

<div style="border:1px solid black; margin:5px;">
prova 1
</div>
prova 1
<div style="border:1px solid black; margin:10px 50px 10px 50px;">
prova 2
</div>
prova 2
<div style="border:1px solid black; margin-left:100px;">
prova 3
</div>
prova 3
<div style="border:1px solid black; margin-right:150px;">
prova 4
</div>
prova 4
<div style="border:1px solid black; margin-top:100px;">
prova 5
</div>
prova 5