CSS Colapso de margen


Ejemplo

Cuando dos márgenes se tocan verticalmente, se contraen. Cuando dos márgenes se tocan horizontalmente, no se colapsan.

Ejemplo de márgenes verticales adyacentes:

Considere los siguientes estilos y marcas:

div{
    margin: 10px;
}
<div>
    some content
</div>
<div>
    some more content
</div>

Estarán separados 10px ya que los márgenes verticales se colapsan sobre uno y otro. (El espaciado no será la suma de dos márgenes).

Ejemplo de márgenes horizontales adyacentes:

Considere los siguientes estilos y marcas:

span{
    margin: 10px;
}
<span>some</span><span>content</span>

Estarán separados 20px ya que los márgenes horizontales no se colapsan en uno y otro. (El espaciado será la suma de dos márgenes).

Superposición con diferentes tamaños.

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}
<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

Estos elementos estarán separados 15px verticalmente. Los márgenes se superponen tanto como pueden, pero el margen más grande determinará el espacio entre los elementos.

Margen de superposición gotcha

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}
<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

¿Cuál será el espacio entre los dos textos? (para ver la respuesta)

El espaciado será de 25px. Dado que los cuatro márgenes se tocan entre sí, se colapsarán, por lo que utilizarán el margen más grande de los cuatro.

Ahora, ¿qué pasa si agregamos algunos bordes a la marca de arriba.

div{
    border: 1px solid red;
}

¿Cuál será el espacio entre los dos textos? (para ver la respuesta)

El espacio será de 59px! Ahora solo los márgenes de .outer-top y .outer-bottom se tocan entre sí, y son los únicos márgenes colapsados. Los márgenes restantes están separados por los bordes. Así que tenemos 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (Los 1px son las fronteras ...)

Disminución de márgenes entre elementos padre e hijo:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

En el ejemplo anterior, solo se aplica el margen más grande. Es posible que haya esperado que el párrafo esté ubicado a 60 px del h1 (ya que el elemento div tiene un margen superior de 40 px y la p tiene un margen superior de 20 px). Esto no sucede porque los márgenes se colapsan juntos para formar un margen.