Algunas precisiones previas:
Margin: indica el espacio de separación entre un elemento y los adyacentes.
Padding: indica el espacio de separación entre el límite de un elemento y los elementos contenidos dentro de él.
Esta precisión es importante porque no todos los navegadores hacen uso del modelo de caja estándar.
Quedémonos con los elementos implicados:
Código html:
Ver original <div id="capa_con_fondo"> <p>P
árrafo con margin-top:40px
</p>
Fíjate que en ejemplo cuando añades el margin-top al párrafo, lo que haces es desplazar el div #caja_con_fondo en la vertical, manteniendo el tamaño de su la altura., esto es, el párrafo se sale de los límites de su caja, choca contra el body y fuerza a todo a bajar. Esto en fierefox 3.5, opera 10, chrome y safary en windows, producto del modelo de caja estandar. En ie7 como implementa otro modelo, pues no ocurre.
Sin profundizar más, creo que deberías utilizar un padding-top en el elemento contenedor en lugar del margin en el párrafo, como te dijeron en su momento. o en el párrafo (p) el paddin-top.
Pero si necesitas/quieres añadir ese margin-top al párrafo tienes dos opciones para evitar ese desplazamiento:
1º= añadir "padding-top: 1px;" a la #capa_con_fondo.
2º= la que más me convence: añadir "overflow: hidden;" a la #capa_con_fondo.
Un saludo