Il collasso dei margini (in inglese: margin collapse) fa parte delle specifiche per il box model e l’uso dei margini verticali. Spesso questo ‘fenomeno’ è ignorato, visto l’uso di altre proprietà che evitano il collasso, mentre ogni tanto, possono dare un risultato sconcertante che potrebbe essere considerato come un errore d’interpretazione.
Il collasso dei margini succede quando margini verticali (margin-top e margin-bottom) adiacenti, senza nessuna separazione tra di loro, di 2 o più elementi di blocco (adiacenti o innestati) si combinano per formare un unico margine.
Importante: il collasso dei margini non succede mai con elementi in linea o per i margini orizzontali (margin-left e margin-right).
Nel caso di margini con valori positivi, dopo il collasso dei margini, il margine risulterà uguale al valore più grande applicato.
Un esempio tipico di collasso dei margini tra 2 elementi di blocco adiacenti sono i paragrafi.
Prendiamo a caso 2 paragrafi a quale applico margini verticali di 20px (margin:20px 0;).
Il risultato sarà che i paragrafi sono separati di 20px tra di loro dovuto al collasso dei margini e non di 40px (cioè non alla somma del margine inferiore del primo, più il margine superiore del secondo paragrafo).
Usando 3 paragrafi, possiamo vedere il comportamento del collasso dei margini tra differente valore positive di margine per più elementi di blocco adiacenti.
In questo caso, applico margine verticale di 80px al primo paragrafo, 20px al secondo e 50px al terzo. Il risultato è una spazio di 80px tra i 2 primi paragrafi e di 50px tra i 2 ultimi. I valori più grande prendono la precedenza.
Nel caso di margini con valori negativi, dopo collasso dei margini, il valore risulta nella differenza tra il più grande valore positivo meno il più grande valore negativo.
Per esempio, 2 paragrafi adiacenti, il primo con margine verticale di -30px e il secondo con margini verticali di 50px, risulterà dopo collasso dei margini a 20px (cioè 50-30).
Nel caso che ci siano solo valori negativi, il valore più grande negativo è applicato.
Il collasso dei margini, non è solo tra elementi adiacenti ma anche tra elementi di blocco innestati.
Un esempio tipico, che può portare ad un difetto nella creazione di una pagina, sarebbe un div principale, contenitore di un secondo div a quale viene applicato un margine superiore (margin-top).
Il risultato è che il div contenitore si sposterà di tot pixel, mentre il suo div innestato rimanerà attaccato al suo bordo superiore.
Esempio: con un div contenitore a quale azzeriamo il margine (tanto per capire che è inutile), che contiene un div con margine superiore (margin-top) di 50px, risulterà nel div contenitore con un margine superiore di 50px e non allo spostamento del div innestato a quale è stato applicato il margine stesso.
Infatti nel caso di elementi innestati, l’unico margine risultato del collasso dei margini è sempre applicato a l’elemento più esterno di tutti.
Esempio: con un div contenitore con margin:0, che contiene un div con margine superiore di 20px, che contiene a sua volta un div con margine superiore 30px.
Il collasso dei margini porterà che il margine di più grande valore (30px) viene applicato direttamente al div contenitore (quello più esterno).
Le soluzione per evitare il collasso dei margini.
Le soluzione più adatte sono incluse nelle specifiche CSS2 riguardo il collasso dei margini, le quale dicono che il collasso non succede per elementi:
- con un bordo (border)
- con uno spazio cuscinetto (padding)
Giustamente, border e padding, creano uno spazio che separano i margini e evitano il collasso.
Con il fatto, che il collasso dei margini succede con elementi di blocco nel loro flusso naturale, il collasso non succederà neanche per elementi:
- floatati (float) e chiariti (clear)
- posizionati in modo assoluto (position:absolute;)
Finalmente, il collasso dei margini non succede per elementi a quale è applicato la proprietà css overflow con un valore altro di ‘visible’ (valore di default).
{ 1 trackback }
{ 3 comments… read them below or add one }
Oh ragazzo ma nessuno ti ha mai detto che margine è maschile (quindi “il margine” non “le margine”, “dei margini” e non “delle margine”). Scusa se lo faccio presente, ma mi risulta veramente fastidioso da leggere il tutorial cosi. Cmq grazie lo stesso
Ciao Antonio, grazie per la segnalazione. In francese (la mia madrelingua), il margine è femminile. Porta a confusione. Ah…come il margine francese, sono femmina.
questi css sono stupendi e di vitale importanza per dei neofiti come me grazie milla atutti