css - quitar - tamaño de bordes html
¿Cómo puedo eliminar un margen? (5)
Desde IE8 puedes 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;
}
Márgenes colapsados en CSS: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Entiendo el propósito de la función , pero estoy tratando de hacer el diseño, y no puedo encontrar la manera de desactivarlo.
La manera generalmente explicada en los tutoriales de CSS es:
- Agrega un borde
- Agregar un relleno
Todos estos tienen efectos secundarios que se vuelven obvios cuando se trata de diseños de píxeles perfectos con imágenes de fondo y rellenos fijos.
¿Hay alguna manera de simplemente deshabilitar el colapso sin tener que agregar píxeles adicionales en el diseño? No tiene sentido que tenga que afectar visualmente el documento para cambiar un comportamiento como este.
Eric Meyer se refiere a su punto exacto en su artículo márgenes de colapso .
Vea el texto del artículo después de la Figura 6 para su enfoque. Menciona que 1px padding / border suele ser el camino a seguir, pero ofrece una solución bastante simple para casos en los que no hay flexibilidad para agregar ese píxel adicional.
Sin embargo, implica anular manualmente los márgenes en cada elemento, por lo que no estoy seguro si funcionará para su caso particular.
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>
Usa diseño Flex o Grid.
En contenedores flexibles y de cuadrícula, no existe el colapso de márgenes.
Más detalles en las especificaciones:
3. Contenedores flexibles: los valores de
displayflexyflexinline-flexUn contenedor flexible establece un nuevo contexto de formato flexible para sus contenidos. Esto es lo mismo que establecer un contexto de formato de bloque, excepto que se usa el diseño flexible en lugar del diseño de bloque. Por ejemplo, los flotadores no se introducen en el contenedor flexible, y los márgenes del contenedor flexible no se colapsan con los márgenes de su contenido.
5.1. Establecimiento de contenedores de rejilla: la
gridy los valores de visualización de lagridinline-gridUn contenedor de cuadrícula establece un nuevo contexto de formato de cuadrícula para sus contenidos. Esto es lo mismo que establecer un contexto de formato de bloque, excepto que se utiliza el diseño de cuadrícula en lugar del diseño de bloque: los flotantes no se inmiscuyen en el contenedor de cuadrícula y los márgenes del contenedor de cuadrícula no se colapsan con los márgenes de su contenido.
bueno, necesitas algo intermedio para "romper" el colapso.
Lo primero que pensé fue utilizar un div con pantalla: ninguno en medio, pero parece que no funciona.
así que lo intenté:
<div style="overflow: hidden; height: 0px; width: 0px;">.</div>
que parece hacer bien el trabajo (al menos en Firefox, no tienes 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>