¿Cómo puedo uncollapse un margen? [duplicar]
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:
- Añadir un borde
- 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.
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
yinline-flex
display
valoresUn 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
yinline-grid
monitor valoresUn 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.