CSS
margini

Sintassi

• margine: <top & right & bottom & left> ;
• margine: <top> , <left & right> , <bottom> ;
• margine: <alto e basso> , <sinistra e destra> ;
• margine: <top> , <right> , <bottom> , <left> ;
• margin-top: <top> ;
• margin-right: <right> ;
• margin-bottom: <bottom> ;
• margin-left: <left> ;

Parametri

Osservazioni

Applica margine su un dato lato

Proprietà specifiche della direzione

CSS ti consente di specificare un lato specifico per applicare il margine a. Le quattro proprietà fornite a questo scopo sono:

• margin-left
• margin-right
• margin-top
• margin-bottom

Il seguente codice applicherebbe un margine di 30 pixel sul lato sinistro del div selezionato. Visualizza risultato

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Specifica della direzione utilizzando la proprietà di stenografia

La proprietà del margin standard può essere espansa per specificare diverse larghezze su ciascun lato degli elementi selezionati. La sintassi per fare ciò è la seguente:

margin: <top> <right> <bottom> <left>;

L'esempio seguente applica un margine di larghezza zero all'inizio del div, un margine di 10 pixel sul lato destro, un margine di 50 pixel sul lato sinistro e un margine di 100 pixel sul lato sinistro. Visualizza risultato

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Margine che crolla

Quando due margini si toccano l'un l'altro verticalmente, vengono compressi. Quando due margini toccano orizzontalmente, non collassano.

Esempio di margini verticali adiacenti:

Considera i seguenti stili e markup:

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

Saranno 10px a parte poiché i margini verticali crollano sopra l'uno e l'altro. (La spaziatura non sarà la somma di due margini).

Esempio di margini orizzontali adiacenti:

Considera i seguenti stili e markup:

span{
    margin: 10px;
}

<span>some</span><span>content</span>

Saranno 20px a parte poiché i margini orizzontali non collassano sull'uno e sull'altro. (La spaziatura sarà la somma di due margini).

Sovrapposizione con dimensioni diverse

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

Questi elementi saranno distanziati di 15px verticalmente. I margini si sovrappongono il più possibile, ma il margine più ampio determinerà la spaziatura tra gli elementi.

Gotcha margine di sovrapposizione

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

Quale sarà la spaziatura tra i due testi? (passa il mouse per vedere la risposta)

La spaziatura sarà 25px. Poiché tutti e quattro i margini si toccano, collassano, utilizzando quindi il margine maggiore dei quattro.

Ora, cosa succede se aggiungiamo alcuni bordi al markup sopra.

div{
    border: 1px solid red;
}

Quale sarà la spaziatura tra i due testi? (passa il mouse per vedere la risposta)

La spaziatura sarà di 59 px! Ora solo i margini di .outer-top e .outer-bottom si toccano e sono gli unici margini compressi. I margini rimanenti sono separati dai bordi. Quindi abbiamo 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (I 1px sono i confini ...)

Margini collassabili tra elementi padre e figlio:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

Nell'esempio sopra riportato, si applica solo il margine più ampio. Ci si può aspettare che il paragrafo si trovi a 60px da h1 (poiché l'elemento div ha un margine superiore di 40px e il p ha un margine superiore di 20px). Ciò non accade perché i margini collassano insieme per formare un margine.

Centra orizzontalmente gli elementi su una pagina usando il margine

Finché l'elemento è un blocco e ha un valore di larghezza impostato in modo esplicito , è possibile utilizzare i margini per centrare gli elementi di blocco su una pagina in senso orizzontale.

Aggiungiamo un valore di larghezza inferiore alla larghezza della finestra e la proprietà automatica del margine quindi distribuisce lo spazio rimanente a sinistra ea destra:

#myDiv {
 width:80%;
 margin:0 auto;
}

Nell'esempio sopra, utilizziamo la dichiarazione del margin stenografico per impostare prima 0 sui valori di margine superiore e inferiore (sebbene questo possa essere qualsiasi valore) e quindi usiamo auto per consentire al browser di allocare automaticamente lo spazio ai valori del margine sinistro e destro.

Nell'esempio sopra, l'elemento #myDiv è impostato su una larghezza dell'80% che lascia il rimanente del 20%. Il browser distribuisce questo valore ai lati rimanenti in modo tale:

(100% - 80%) / 2 = 10%

Semplificazione della proprietà del margine

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

Un altro esempio:

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

Margini negativi

Margine è una delle poche proprietà CSS che può essere impostata su valori negativi. Questa proprietà può essere utilizzata per sovrapporre elementi senza posizionamento assoluto .

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

Esempio 1:

È ovvio supporre che il valore percentuale del margine a margin-left e margin-right sia relativo al suo elemento genitore.

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

Ma non è questo il caso, quando si tratta di margin-top e margin-bottom . Entrambe queste proprietà, in percentuale, non sono relative all'altezza del contenitore genitore ma alla larghezza del contenitore genitore.

Così,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}