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

Hay dos tipos principales de colapso del margen:

• Colapso de márgenes entre elementos adyacentes.
• Colapso de márgenes entre elementos primarios y secundarios

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

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

• float: left / right
• position: absolute
• display: inline-block / flex

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

Debo agregar que, como de costumbre, 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 padre, como width.

Fuentes: artículo de Sitepoint Márgenes colapsados

También puede usar el buen micro clearfix para esto.

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

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

Un buen truco para deshabilitar el colapso del margen que no tiene impacto visual, que yo sepa, es configurar el relleno del padre para 0.05px:

.parentClass {
    padding: 0.05px;
}

El relleno ya no es 0, por lo que el colapso ya no ocurrirá, 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 solo 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>

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

overflow:hidden evita el colapso de los márgenes, pero no está libre de efectos secundarios, es decir, oculta el desbordamiento.

Aparte de esto y de lo que has mencionado, solo tienes que aprender a vivir con él y aprender para el día en que realmente sean útiles (viene cada 3 a 5 años).

En realidad, hay uno que funciona perfectamente:

pantalla: flex; dirección flexible: columna;

siempre que pueda vivir con soporte solo para IE10 y hasta

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Todos los navegadores basados ​​en webkit deberían admitir las propiedades -webkit-margin-collapse. También hay subpropiedades para configurarlo solo para el margen superior o inferior. Puede darle el colapso de los valores (predeterminado), descartar (establece el margen en 0 si hay un margen adyacente) y separarlo (evita el colapso del margen).

He probado que esto funciona en las versiones 2014 de Chrome y Safari. Desafortunadamente, no creo que esto sea compatible con IE porque no está basado en webkit.

Lea la referencia CSS de Safari de Apple para obtener una explicación completa.

Si revisa la página de extensiones de webkit CSS de Mozilla , enumeran estas propiedades como propietarias y recomiendan no usarlas. Esto se debe a que probablemente no entrarán en CSS estándar en el corto plazo y solo los navegadores basados ​​en webkit los admitirán.

Sé que esta es una publicación muy antigua, pero solo quería decir que usar flexbox en un elemento primario deshabilitaría el colapso de margen para sus elementos secundarios.

Tuve un problema similar con el colapso del margen debido a que los padres se positionestablecieron en relativo. Aquí hay una lista de comandos que puede usar para deshabilitar el colapso de márgenes.

AQUÍ HAY JUEGO PARA PRUEBA

Solo intenta asignar cualquier parent-fix*clase a un div.containerelemento, o cualquier clase children-fix*a div.margin. Elija el que mejor se adapte a sus necesidades.

Cuando

• el colapso del margen está deshabilitado , div.absolutecon el fondo rojo se colocará en la parte superior de la página.
• el margen se contrae se div.absolute colocará en la misma coordenada Y quediv.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

Aquí está jsFiddle con un ejemplo que puedes editar

En el navegador más nuevo (excluyendo IE11), se usa una solución simple para evitar el colapso del margen padre-hijo display: flow-root. Sin embargo, aún necesitaría otras técnicas para evitar el colapso de elementos adyacentes.

DEMO (antes)

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

DEMO (después)

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Para su información, podría usar la cuadrícula pero con efectos secundarios :)

.parent {
  display: grid
}