¿Cómo puedo uncollapse un margen? [duplicar]

StackOverflow https://stackoverflow.com/questions/1828804

  •  11-09-2019
  •  | 
  •  

Pregunta

    

Esta pregunta ya tiene una respuesta aquí:

    
            
  •              Cómo deshabilitar margen colapso?                                      9 respuestas                          
    •     
    

El colapso de los márgenes en CSS: http://www.w3.org /TR/CSS21/box.html#collapsing-margins

de la función , pero yo estoy tratando de hacer el diseño, y no puedo encontrar la manera de apagarlo.

La forma general se explica en tutoriales de CSS es que sea:

  1. Añadir un borde
  2. Añadir un acolchado

Todos estos tienen efectos secundarios que se hacen evidentes cuando se está tratando con diseños de píxeles perfectos con imágenes de fondo y juntas fijas.

¿Hay alguna manera de desactivar simplemente el colapso sin tener que empujar píxeles adicionales en el diseño? No tiene ningún sentido para mí tener a afectar visualmente el documento para cambiar el comportamiento de esta manera.

¿Fue útil?

Solución

también se necesita algo en el medio para "romper" el colapso.

Lo primero que pensé fue utilizar un div con display:none establecido en el medio, pero eso no parece funcionar.

lo que he intentado: 

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

lo que parece hacer el trabajo muy bien (al menos en Firefox, no tienen Internet Explorer instalado aquí para probarlo ...) 

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

Otros consejos

A partir de IE8 que podría hacer: 

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Con CSS: 

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

El uso de Flex o de diseño de cuadrícula.

En recipientes de flexión y de la rejilla, no hay tal cosa como margen de colapso.

Más detalles en las especificaciones:

  

3. Flex recipientes: la flex y inline-flex display   valores

     

Un recipiente flex establece un nuevo contexto de formato de flexión por su   contenido. Esto es lo mismo que establecer un contexto de formato de bloque,   excepto que el diseño de la flexión se utiliza en lugar del diseño de bloque. Por ejemplo,   flotadores no interfieran en el recipiente de la flexión y la flexión   márgenes de contenedores no se colapsan con los márgenes de su contenido.

     

5.1. El establecimiento de la cuadrícula Contenedores: la grid y inline-grid   monitor   valores

     

Un recipiente rejilla establece un nuevo contexto de formato de cuadrícula para su   contenido. Esto es lo mismo que establecer un contexto de formato de bloque,   excepto que diseño de cuadrícula se utiliza en lugar del diseño de bloque: flotadores no lo hacen   se inmiscuyen en el contenedor de cuadrícula, y los márgenes del contenedor de cuadrícula hacen   no colapsar con los márgenes de su contenido.

Eric Meyer se refiere al punto exacto en su artículo márgenes Uncollapsing .

Vea el texto del artículo después de la Figura 6 para su acercamiento. Menciona que el relleno 1px / frontera suele ser el camino a seguir, pero ofrece una solución muy simple para los casos en que no hay flexibilidad en la adición de ese píxel adicional.

Se trata de tomar el mando manual sobre los márgenes de cada elemento, sin embargo, así que no estoy seguro de si va a trabajar para su caso particular.

Un buen truco para desactivar colapso margen que no tiene ningún impacto visual, por lo que yo sé, es establecer el relleno de los padres a 0.05px: 

.parentClass {
    padding: 0.05px;
}

El relleno ya no es 0, por lo que no se producirá más colapsando, pero al mismo tiempo el relleno es lo suficientemente pequeño que visualmente se redondea hacia abajo a 0.

Si se desea algún otro relleno, a continuación, aplicar el acolchado sólo a la "dirección" en los que no se desea colapso 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 ha cambiado el valor de 0.1 a 0.05. De esta prueba pequeña , parece que Firefox tiene el relleno 0.1px en consideración. Sin embargo, 0.05px seemes para hacer el truco.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top