Advertisement
  1. Web Design
  2. CSS

Fundamentos de CSS: Comprensión del colapso de márgenes

Read Time:5 minsLanguages:

Spanish (Español) translation by Trix (you can also view the original English article)

Los elementos son los bloques de construcción de las páginas web: al crear sitios web, en realidad estás "colocando ladrillos" de elementos. Cuando se colocan estos elementos, se usa CSS para ajustar su apariencia y su ubicación.

Para colocar un elemento en una página web correctamente en relación con otros elementos hacemos uso de cosas como el relleno (padding) y los márgenes (margin). Estos son:

  • Relleno: el espacio entre el borde del elemento y el área de contenido.
  • Margen: los espacios entre el borde exterior de un elemento y el de sus elementos vecinos.

Así es como se visualiza el relleno y el margen de un elemento mediante el Inspector web de Google Chrome:

padding and margin of an element padding and margin of an element padding and margin of an element

Esto debería ser suficientemente explicativo, pero hay una situación en la que el margen entre un elemento y el de un elemento vecino se fusionarán (o colapsarán) en un espacio unificado; de tal manera que no hay manera de decir realmente de quién es el espacio:

padding and margin of an element collapsed into a unified spacepadding and margin of an element collapsed into a unified spacepadding and margin of an element collapsed into a unified space

Esto podría haber ocurrido en tu propio código si has estado escribiendo HTML y CSS durante un tiempo. ¡Y puede ser una espina en tu costado si no tienes idea de lo que está sucediendo entre bastidores!

Para entenderlo correctamente, necesitamos empezar definiendo qué significa que los márgenes colapsen.

¿Qué es un margen colapsado?

Buena pregunta, me alegro de que la hayas hecho. Según W3C:

"En CSS, los márgenes adyacentes de dos o más bloques (que podrían o no ser hermanos) pueden combinarse para formar un único margen. Cuando los márgenes se combinan de esta manera decimos que colapsan, y el margen combinado resultante se denomina margen colapsado." –

W3C

Vamos a explicar cada palabra poco a poco.

Por lo tanto, los "márgenes adyacentes" son márgenes que están uno al lado del otro, y pueden combinarse para formar un único margen. Pero, ¿significa esto que todos los márgenes adyacentes pueden colapsar? ¡La respuesta es no!

En CSS, los márgenes adyacentes son márgenes verticales que cumplen algunas reglas. ¡Sí, lo leíste correctamente! Esto significa que los márgenes horizontales (margin-left y margin-right) no se consideran márgenes adyacentes. Hay además algunas situaciones en las que los márgenes verticales no se consideran adyacentes.

Comencemos con algunos escenarios donde se dan los márgenes colapsables.

1. Elemento padre y primer hijo

En el ejemplo de código siguiente:

El segundo div es el padre y contiene un elemento secundario p. Si aplicamos una propiedad de margen superior (margin-top) al elemento padre y al primer elemento hijo, ambos márgenes se tocan, y colapsan.

Deberías esperar que se muestre un margen justo sobre el elemento p rojo, lo que nos da una porción de verde sobre él.

Sin embargo, el elemento padre y su elemento hijo se alinean en su borde superior, después se elige el margen con el valor mayor (30px) para aparecer ambos, y el más pequeño se contrae a 0. Si el elemento hijo tuviera el valor más grande (digamos, 50px) entonces ese sería el margen sobre de ellos.

Si lo mides, verás que el espacio entre el borde del elemento hijo y el div exterior es de 30px.

Valores de margen negativos

Si ambos márgenes tuvieran valores negativos, como este ejemplo:

El margen elegido es de nuevo el de mayor valor, que en este caso es -10px.

Sin embargo, si un margen tiene un valor negativo y el otro no, combinamos ambos valores:

En este caso, se añadirán los márgenes, lo que nos dará un resultado de -20px.

Importante: los valores se determinan exactamente de la misma manera en todos los escenarios donde los márgenes se colapsan.

2. Elemento padre y último hijo

Como puedes imaginar, los márgenes colapsados también pueden tener lugar entre el margen inferior (margin-bottom) de un elemento primario y el margen inferior de un elemento hijo. Supongamos que tenemos el siguiente código HTML:

Y los siguientes estilos:

Se utilizará el margen inferior (margin-bottom) con el valor más grande, mientras que el otro colapsará a 0. La diferencia aquí es que la altura del padre tiene que estar establecida en auto.

3. Elementos adyacentes

Dentro de un elemento padre, los márgenes colapsados se producirán cuando el primer elemento hijo tenga margin-bottom aplicado y el siguiente elemento tenga aplicado margin-top:

Si aplicamos margin-top y margin-bottom de la siguiente manera:

Haciendo los mismos cálculos que antes, el espacio entre el borde de los elementos hijos será de 30px, no de 20px.


3 puntos a recordar sobre los márgenes colapsados

¡Eso nos lleva al final de esta introducción al colapso de márgenes en CSS! Además de lo que hemos visto anteriormente, hay algunas cosas importantes que debo reiterar en relación al valor de un margen colapsado.

1. Elementos de nivel de bloque

Los márgenes colapsados solo son posibles cuando se utilizan elementos de nivel de bloque.

2. Los márgenes únicamente colapsan verticalmente

Sólo los márgenes adyacentes verticalmente colapsarán, e incluso entonces no siempre.

2. Relleno, bordes y distancia

Si añadimos relleno, borde o espacio a los elementos de los ejemplos anteriores, no se aplicará el colapso. En otras palabras, una forma de deshacerse del comportamiento del colapso de márgenes consiste en añadir algún tipo de separación (borde, relleno o espacio libre) entre los márgenes.

Conclusión

Mientras que el colapso de los márgenes a veces puede ser algo molesto, entender cómo y dónde tienen efecto es muy útil, ¡especialmente si los encuentras accidentalmente!

Más información sobre conceptos básicos de CSS

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.