¿Cómo desactivar el colapso de márgenes?

¿Hay alguna manera de desactivar por completo el colapso de márgenes? Las únicas soluciones que he encontrado (con el nombre de "descomprimir") implican el uso de un borde de 1 px o un relleno de 1 px. Esto me parece inaceptable: el píxel extraño complica los cálculos sin una buena razón. ¿Existe una forma más razonable de desactivar este colapso de márgenes?

Nov 01 '13 06:11 kjo

Hay dos tipos principales de colapso de márgenes:

Colapsar márgenes entre elementos adyacentes
Colapsar márgenes entre elementos padre e hijo

El uso de un relleno o un borde evitará el colapso sólo en el último caso. Además, cualquier valor overflowdiferente al predeterminado ( visible) aplicado al padre evitará el colapso. Por lo tanto, ambos overflow: autoy overflow: hiddentendrán el mismo efecto. Quizás la única diferencia al usarlo hiddenes la consecuencia no deseada de ocultar contenido si el padre tiene una altura fija.

Otras propiedades que, una vez aplicadas al padre, pueden ayudar a solucionar este comportamiento son:

float: left / right
position: absolute
display: flex / grid

Puede probarlos todos aquí: http://jsfiddle.net/XB9wX/1/ .

Debo añadir que, como siempre, Internet Explorer es la excepción. Más específicamente, en IE 7 los márgenes no colapsan cuando se especifica algún tipo de diseño para el elemento principal, como width.

Fuentes: artículo de Sitepoint Collapseing Margins

Nov 01 '2013 01:11 HQCasanova

Un buen truco para desactivar el colapso de márgenes que no tiene impacto visual, hasta donde yo sé, es establecer el relleno del padre en 0.05px:

.parentClass {
    padding: 0.05px;
}

El relleno ya no es 0, por lo que ya no se producirá el colapso, pero al mismo tiempo el relleno es lo suficientemente pequeño como para que visualmente se redondee a 0.

Si se desea algún otro relleno, aplique el relleno sólo en la "dirección" en la que no se desea el colapso del margen, por ejemplo padding-top: 0.05px;.

Ejemplo de trabajo:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

Expandir fragmento

Editar: cambió el valor de 0.1a 0.05. Como Chris Morgan mencionó en un comentario a continuación, y a partir de esta pequeña prueba , parece que Firefox tiene 0.1pxen cuenta el relleno. Sin embargo, 0.05pxparece funcionar.

Oct 14 '2015 18:10 Nicu Surdu

También puedes utilizar el viejo micro clearfix para esto.

#container::before, #container::after{
    content: ' ';
    display: table;
}

Ver violín actualizado: http://jsfiddle.net/XB9wX/97/

Aug 05 '2014 11:08 Blackgrid