Márgenes colapsables
Al utilizar la propiedad margin
en CSS hay que tener en cuenta que los márgenes verticales ( margin-top
y margin-bottom
) pueden colapsar. Â Un ejemplo sería una lista <ul>
donde los elementos <li>
aparecen uno debajo de otro. Supongamos que los elementos <li>
tienen un margen declarado de margin:1em 1em .5em 1em;
. En este caso la distancia entre Uno
y Dos
tendría que ser de 1.5em
( 0.5em
para el margin-bottom
de Uno
más 1em
para el margin-top
de Dos
). Sin embargo la distancia entre Uno
y Dos
es de solo 1em
. Esto pasa porque los márgenes verticales adyacentes colapsan y el margen mas pequeño es eliminado (el margin-bottom
de Uno
en este caso).
See the Pen Márgenes colapsadas - una lista*** by Gabi (@enxaneta) on CodePen.
Otro ejemplo sería un grupo de párrafos. En el ejemplo anterior el elemento contenedor (la lista <ul>
) tiene padding padding:.5em;
. Esto impide que el margen superior de Uno
y el margen inferior de Listo
 colapsen. A diferencia del ejemplo anterior el .envoltorio
del siguiente ejemplo no tiene padding y las margenes del primer y del último párrafo están colapsadas a 0.
See the Pen Margin by Gabi (@enxaneta) on CodePen.
Si el elemento contenedor no tiene borde o no tiene padding
el margen superior de Uno
y el margen inferior de Listo
 colapsen también. Para que sea claro que pasa en el siguiente ejemplo el .envoltorio
tiene un outline
. En realidad los márgenes colapsados no desaparecen, siguen allá, y si abrimos el inspector podemos ver claramente que el margen superior del primer elemento sigue allá pero sale del contenedor. Lo mismo pasa con el último.
En la siguiente imagen puede ver claramente como el margen ( anaranjado ) sigue allá pero sale del contenedor:
Prevenir que los márgenes colapsen
Para prevenir que los márgenes exteriores colapsen podemos:
- añadir un borde (
border
) al envoltorio - hacer que el envoltorio tenga
padding
. - flotar el envoltorio:Â
.envoltorio: {float:left;}
- hacer que el envoltorio tenga
position:absolute;
 oposition:fixed;
- hacer que el envoltorio tenga
column-span:all;
- utilizar
display:inline-block;
odisplay:table-cell;
 odisplay:table-caption;
para el envoltorio - utilizar
overflow:auto
o cualquier otro valor exceptooverflow:visible
Todos estos métodos crean un Block Formating Context ( abreviado BFC ) en el cual los márgenes del primer y del último elemento del envoltorio no colapsan.
Podemos conseguir lo mismo utilizando display:flow-root con la precaución que display:flow-root
no está todavía soportado en todos los navegadores.
Para prevenir que ningún borde no colapse dentro del envoltorio podemos:
- utilizar
display: flex; flex-direction:column;
o - utilizar
display: grid;
En la siguiente demo por favor descomente de una en una las reglas comentadas del envoltorio: