⇪

Márgenes colapsables

facebook-svg gplus-svg twitter-svg

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:

margenes colapsables

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;  o position:fixed;
  • hacer que el envoltorio tenga column-span:all;
  • utilizar display:inline-block; o display:table-cell;  o display:table-caption; para el envoltorio
  • utilizar overflow:auto o cualquier otro valor excepto overflow: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:

See the Pen Margin by Gabi (@enxaneta) on CodePen.