Collasso del margine CSS
A volte due margini collassano in un unico margine.
Margine di collasso
I margini superiore e inferiore degli elementi a volte vengono compressi in un unico margine uguale al più grande dei due margini.
Questo non accade sui margini sinistro e destro! Solo margini superiore e inferiore!
Guarda il seguente esempio:
Esempio
Dimostrazione del collasso del margine:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Nell'esempio sopra, l'elemento <h1> ha un margine inferiore di 50px e l'elemento <h2> ha un margine superiore impostato su 20px.
Il buon senso sembrerebbe suggerire che il margine verticale tra <h1> e <h2> sarebbe un totale di 70px (50px + 20px). Ma a causa del collasso del margine, il margine effettivo finisce per essere 50px.
Tutte le proprietà del margine CSS
Property | Description |
---|---|
margin | A shorthand property for setting the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |