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 delmargin-top
del seu primer bloc fill; o sense vora, farcit, contingut en línia,height
,min-height
, omax-height
per separar elmargin-bottom
d'un bloc delmargin-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
omin-height
per separar un blocmargin-top
del seumargin-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é
- Referència CSS
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.