w3org - w3c etiquetas html
margin-top en un div anidado (6)
"Colapsando márgenes" es su problema. Aquí puede comprender qué es y por qué sigue vivo: sitepoint.com/web-foundations/collapsing-margins
Leí en la web para buscar una solución decente, y finalmente encontré este artículo: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
En resumen, tiene varios métodos para resolver su problema:
1) borde en div principal (podría ser transparente)
2) relleno en div principal
3) desbordamiento: automático
4) flotar: izquierda
Debe seguir el enlace porque explica en detalle todas las soluciones.
Tengo un problema con el margin-top de un div anidado: cuando aplico margin-top al div anidado, el margen se aplica al div principal en lugar del div anidado.
¿Algunas ideas?
Así es como funcionan los márgenes ... el margen es el espacio entre el siguiente elemento con un margen / relleno / similar. No se define necesariamente como su elemento padre. Consulte la especificación .
Aquí hay algunas cosas que puede hacer como una solución
Use relleno en su lugar
Esto solo significa que en lugar de usar margin-top: 10px; usted usa padding-top: 10px; . Esto no es adecuado para cada ocasión.
Weird Hack I Descubierto
Dudo que descubrí esto inicialmente, pero el otro día resolví el problema de esta manera. Tenía un <div id="header" /> que quería dar un margen superior también, y su margen superior también empujaba al elemento principal (elemento del body ) hacia abajo. Así que hice esto en el elemento del body ...
body {
padding-top: 1px;
margin-top: -1px;
}
Esto hizo que mi margen funcionara. También puede intentar usar un borde, como border: 1px solid #ccc .
También sería aconsejable dejar una nota en los comentarios de CSS para explicar por qué tiene ese peculiar par de reglas. Acabo de agregar /* this is to stop collapsing margins */ .
Otras lecturas
El desbordamiento de razón: auto cambia el div principal para permitir que el margen de margen anidado sea que crea un nuevo contexto de formato. Cualquier div que esté posicionado como absoluto, fijo, flotante o con desbordamiento que no sea visible crea un nuevo contexto de formato. El div principal entonces se convierte en la raíz de este nuevo contexto de formato, y los márgenes que se colapsan no se aplican a los elementos raíz.
Más en profundidad:
Los contextos de formato pueden ser en línea o en bloque, y solo los contextos de formato de bloque colapsan sus márgenes. Estos contextos de formato forman el flujo del documento.
Un contexto de formato de bloque es simplemente todos los elementos de nivel de bloque (por ejemplo, divs, p, table) dispuestos uno detrás de otro verticalmente dentro de un bloque contenedor hasta el final del documento / contenedor o hasta que se establece un nuevo contexto de formato.
En el caso de la anidación, el margen superior del niño colapsa con el margen superior del elemento principal ya que ambos divs son parte de un contexto de formato de bloques. Al establecer el desbordamiento en automático, el div principal se convierte en el contenedor del nuevo contexto de formato y el elemento secundario en el primer elemento de bloque dentro de él. Por lo tanto, los dos márgenes ya no son "contiguos" ya que el div principal ahora es la raíz.
Espero que ayude.
Modelo de caja: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Modelo de formato visual: http://www.w3.org/TR/CSS2/visuren.html#normal-flow
Los márgenes colapsarán por diseño. Agregue 1px de relleno también y debería funcionar bien.
Obtengo la solución con desbordamiento: automático en el div principal.
También puedes usar la propiedad position para div interno para arreglar esto. me gusta:
position:fixed;