El colapso de márgenes es un comportamiento de CSS donde los márgenes verticales de los elementos a nivel de bloque se combinan en uno, es decir, al margen del elemento con el valor más grande. A veces, cuando asignamos márgenes a los elementos, no funciona de la manera que pensamos y eso genera confusión. Las siguientes reglas lo ayudarán a comprender el colapso de los márgenes:
Regla 1: solo se colapsan los márgenes verticales de los elementos a nivel de bloque
La primera regla es que solo los márgenes verticales de los elementos colapsarán y no los márgenes horizontales. Las reglas de CSS que rigen el colapso de márgenes dicen que los márgenes horizontales nunca pueden satisfacer las condiciones requeridas.
Ejemplo 1:
HTML
<html>
<head>
<style>
p {
font-size: 24px;
margin-top: 34px;
margin-bottom: 34px;
background-color: rgb(79, 236, 119);
}
</style>
</head>
<body>
<div class="container">
<p>
This paragraph's bottom
margin is collapsed.
</p>
<p>
This paragraph is 34px
below the above text.
</p>
</div>
</body>
</html>
Resultado: En este ejemplo, en lugar de colocarse a 68 px de distancia, los márgenes de 34 px de la primera y la segunda etiqueta <p> se fusionan, ocupando el mismo espacio. Como el margen inferior del primer párrafo se fusiona con el margen superior del segundo párrafo. Por lo tanto, el espacio entre los dos párrafos es solo de 34 px.
Ejemplo 2: Este ejemplo demuestra lo que sucederá si se utilizan márgenes horizontales.
HTML
<html>
<head>
<style>
p {
font-size: 24px;
display: inline-block;
margin-left: 34px;
margin-right: 34px;
background-color: rgb(79, 236, 119);
}
</style>
</head>
<body>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
</body>
</html>
Salida: Está claro que los márgenes horizontales no colapsan. El colapso de márgenes solo ocurre en elementos a nivel de bloque. Aparte de los elementos a nivel de bloque, ningún otro margen de elementos puede contraerse. Aquí, tenemos dos etiquetas <p> que estaban en bloque en línea, por lo tanto, su margen no colapsa.
Regla 2: Los elementos deben ser adyacentes
El colapso del margen ocurre solo cuando los elementos del bloque entran en contacto directo entre sí. No deben estar separados por ningún salto de línea u otros elementos. Por lo general, proporcionamos la etiqueta <br> entre dos elementos, pero debido a esto, los márgenes no colapsarán.
Ejemplo: En este ejemplo, proporcionamos un salto de línea entre dos elementos.
HTML
<html>
<head>
<style>
p {
margin-top: 32px;
margin-bottom: 32px;
background-color: rgb(79, 236, 119);
}
</style>
</head>
<body>
<p>This is paragraph 1</p>
<br>
<p>This is paragraph 2.</p>
</body>
</html>
Salida: puede ver en la salida que el margen superior de la segunda etiqueta <p> no colapsa con el margen inferior de la primera etiqueta <p> y esto sucede debido al salto de línea entre los dos elementos. Los elementos deben ser adyacentes para que se colapsen los márgenes.
Regla 3. Se utilizará el elemento con mayores márgenes
Esta regla decide lo que sucederá cuando los márgenes sean asimétricos. Eso significa que si el elemento superior quiere 62 px de espacio debajo, mientras que el elemento inferior solo necesita 24 px arriba. En esta condición, el espacio entre los dos elementos será de solo 62px. Como ya se explicó anteriormente, si tiene dos elementos adyacentes sin relleno, borde o salto de línea entre ellos (es decir, sus márgenes se tocan verticalmente), entonces su margen colapsará y el margen más grande de los dos gana.
Regla 4: la propiedad de desbordamiento debe configurarse como visible
Los márgenes de los elementos no se colapsan cuando el valor de la propiedad de desbordamiento de los elementos se establece en cualquier valor que no sea visible. Su valor debe ser visible para que el margen pueda colapsar. Por lo tanto, overflow: hidden y overflow: auto no permitirán que el margen colapse.
Regla 5: Los márgenes negativos se sumarán
Un margen negativo se utiliza para reducir el espacio entre dos elementos. Puso los elementos más cerca unos de otros. Considere que el margen inferior del primer elemento es -65px y el margen superior del segundo elemento es -25px. En ese caso, el espacio entre los dos elementos será -65px ya que es más significativo que -25px. Pero cuando un margen es positivo y otro es negativo, estos márgenes se suman para obtener el espacio entre los elementos.
Ejemplo:
HTML
<html>
<head>
<style>
div {
font-size: 24px;
height: 75px;
background-color: rgb(79, 236, 119);
}
#b1 {
margin-bottom: 50px;
}
#b2 {
margin-top: -25px;
}
</style>
</head>
<body>
<div id="b1">This is block 1.</div>
<div id="b2">This is block 2.</div>
</body>
</html>
Salida: En este ejemplo, el margen inferior del primer div es 50px y el margen superior del segundo div es -25px. Entonces, el tamaño del espacio entre ellos será de 25 px (-25 px + 50 px).
Regla 6: no colapsar los márgenes entre los elementos principal y secundario
Se utiliza un margen para aumentar el espacio entre los elementos hermanos. No se puede usar para aumentar el espacio entre los elementos principal y secundario, ya que tenemos relleno. El margen solo se transfiere del elemento secundario al elemento principal, ya que el margen siempre intenta aumentar el espacio entre los elementos hermanos y, por lo tanto, sentimos que el margen se aplica al elemento principal. Por lo tanto, no hay un colapso de margen entre los elementos principal y secundario, solo se transfiere un margen entre ellos.
Para transferir el margen al elemento principal, se deben cumplir las siguientes condiciones:
- Padre e Hijo deben estar adyacentes.
- La altura del elemento principal debe ser automática.
- Los elementos principales no deben tener relleno ni borde.
Regla 7: el colapso solo funciona en un diseño de flujo
El margen nunca colapsa cuando los elementos están alineados en flexbox o grid box, o no están en flujo, por ejemplo, absolutamente posicionados o flotantes.
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA