2011-09-10 25 views
5

Estoy comenzando un nuevo proyecto y quiero usar normalize.css pero me enfrenta un pequeño problema. En la parte superior del DOM encontrarás una brecha amarilla, color de fondo del cuerpo. El contenedor principal es de color verde y contiene exactamente el html de la demo de normalize.css.Normalize.css brecha del encabezado superior

encontrará una demostración aquí: http://goo.gl/hf8cv

+0

¿El problema es el espacio amarillo (en este caso eliminar el cuerpo {background-color: yellow})? ¿O mostrar el HTML predeterminado? – user500198

+0

Este archivo se usará en iframe y hay demasiado espacio en la parte superior. – birkof

Respuesta

13

Lo que se ve es el margen colapso.

Cuando un elemento con un margen se encuentra dentro de un elemento sin borde o relleno, el margen se contrae con el margen del elemento principal.

Es el margen del elemento h1 que ve en la parte superior. Como ninguno de los padres tiene borde o relleno, el margen se derrumba hasta llegar al contenedor más externo.

+1

¡Gracias por el consejo! h1, h2, h3, h4, h5, h6 {margen: 0; relleno: 0} resuelven el problema, por el momento. ¿Hay alguna otra forma de resolver estos colapsos sin afectar el margen en los títulos (h1, h2 ...)? – birkof

+1

Agregar 'overflow: auto' en el padre también evita que los márgenes colapsen. – Guffa

+0

'overflow: hidden;' para el elemento 'div' principal se superpondrá completamente al contenido. – lnguyen55

Cuestiones relacionadas