div - quitar margenes css

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

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo eliminar un margen? 5 respuestas

¿Hay alguna forma de deshabilitar el colapso de márgenes por completo? Las únicas soluciones que he encontrado (con el nombre de "uncollapsing") implican usar un borde 1px o un relleno 1px. Encuentro esto 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?

Answer 1

Cada navegador basado en webkit debe soportar las propiedades -webkit-margin-collapse. También hay subpropiedades para establecerlo solo para el margen superior o inferior. Puede asignarle el colapso de los valores (predeterminado), descartarlo (establece el margen en 0 si hay un margen cercano) y separar (evita el colapso del margen).

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

Lea Apple''s Safari CSS Reference para obtener una explicación completa.

Si revisas la página de extensiones de webkit de CSS de Mozilla , enumeran estas propiedades como propietarias y recomiendan no usarlas. Esto se debe a que es probable que no entren en CSS estándar pronto y solo los navegadores basados ​​en webkit los admitirán.

Answer 2

En realidad, hay uno que funciona sin problemas:

pantalla: flexión; flexión: columna;

siempre y cuando puedas vivir solo con 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>

Answer 3

Hay dos tipos principales de colapso de margen:

• Colapsando márgenes entre elementos adyacentes
• Colapsando márgenes entre elementos padres e hijos

El uso de un relleno o borde evitará el colapso solo en este último caso. Además, cualquier valor de overflow diferente de su valor predeterminado ( visible ) aplicado al elemento principal impedirá el colapso. Por lo tanto, ambos overflow: auto y overflow: hidden tendrá el mismo efecto. Quizás la única diferencia cuando se usa hidden es 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

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

Debo añadir 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 el width .

Fuentes: artículo de Sitepoint Colapsando Márgenes

Answer 4

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

.parent {
  display: grid
}

Answer 5

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

Answer 6

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

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

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

Answer 7

Tuve un problema similar con el colapso de margen debido a que el padre tenía una position establecida en relativa. Aquí hay una lista de comandos que puede usar para deshabilitar el colapso de márgenes.

AQUÍ ESTÁ PLAYGROUND TO TEST

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

Cuando

• colapso de margen está deshabilitado , div.absolute con fondo rojo se colocará en la parte superior de la página.
• el margen se está colapsando div.absolute se div.absolute en la misma coordenada Y que div.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 el ejemplo que puede editar

Answer 8

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

.parentClass {
    padding: 0.1px;
}

El relleno ya no es 0, por lo que no se producirá el colapso y el relleno será menor a 0.5px, por lo que visualmente redondeará a 0.

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

Ejemplo de trabajo:

.noCollapse {
  padding: 0.1px;
}

.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>

Answer 9

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 en vivo con él y aprender para este día cuando en realidad son útiles (viene cada 3 a 5 años).