Dominar el col.lapse del marge

Els marges superior (top) i inferior (bottom) dels blocs, a vegades, es combinen (col·lapsats) en un únic marge, la grandària del qual és el més gran dels marges individuals (o només un d'ells, si són iguals), un comportament conegut com col·lapse del marge. Tingueu en compte que els marges dels elements flotants i absolutament posicionats mai es col·lapsen.

El col·lapse de marges es produeix en tres casos bàsics:

Germans adjacents
Els marges dels germans adjacents estan col·lapsats (excepte quan el darrer germà ha de ser eliminat dels flotadors anteriors).
Pare i primer/últim fill
Si no hi ha una vora, farcit, part en línia, context de format de blocs creat, o un espaia lliure per separar el margin-top d'un bloc del margin-top del seu primer bloc fill; o sense vora, farcit, contingut en línia, height, min-height, o max-height per separar el margin-bottom d'un bloc del margin-bottom del seu últim fill, llavors aquests marges es col·lapsen. El marge col·lapsat acaba fora del pare
Blocs buits
Si no hi ha vora, farcit, contingut en línia, height o min-height per separar un bloc margin-top del seu margin-bottom, llavors els marges superior i inferior es col·lapsen.

Algunes coses a destacar:

  • El col.lapse de marges més complex (de més de dos marges) es produeix quan es combinen els casos anteriors.
  • Aquestes regles s'apliquen fins i tot als marges que són zero, de manera que el marge d'un fill primer/últim acaba fora dels seus pares (d'acord amb les regles anteriors) tant si el marge dels pares és zero o no.
  • Quan s'inclouen marges negatius, la mida del marge col·lapsat és la suma del marge positiu més gran i el marge negatiu més petit (més negatiu).
  • Quan tots els marges són negatius, la mida del marge col·lapsat és el marge més petit (el més negatiu). Això s'aplica tant als elements adjacents com als elements niats.

Exemples

HTML

<p>The bottom margin of this paragraph is collapsed …</p>
<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>

<div>This parent element contains two paragraphs!
  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
</div>

<p>I am <code>2rem</code> below the element above.</p>

CSS

div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: .4rem 0 1.2rem 0;
  background: yellow;
}

Resultat

Especificacions

Especificació Estat Comentari
CSS Level 2 (Revision 1)
The definition of 'margin collapsing' in that specification.		 Recommendation Definició inicial.

Vegeu també