Pues al final es una cuestión de la extraña formar que tiene CSS de colapsar márgenes. Digo extraño porque las consecuencias es una de esas cosas que nadie entiende muy bien porqué son como son.
La cuestión es que, al colapsa el margen superior, este termina por fuera de su contenedor.
Cuando no existe borde, padding, contenido en linea o un clear —por eso va el overflow también— para separar el margen superior de un elemento con el margen superior de su primer elemento hijo —siempre y cuando este sea un elemento de bloque—, los márgenes se colapsan. Luego el margen colapsadao sale por fuera del contenedor.
Luego tu problema, como ya comentó
pitufoweb, es realmente margen superior del párrafo. Lo que al añadir un borde desaparece el problema. En realidad solucionaste un problema sin entender que existía.
El overflow de
pitufoweb es una solución, seguramente la más limpia. Pero siempre y cuando evites que la situación sea la arriba menciona, todo vale.
Por ejemplo:
Código CSS:
Ver originalheader p {
display: inline; /* o inline-block */
}
El porqué, como digo, a mi me sigue siendo un misterio. Cosas de la W3C. Al menos sabes cómo solucionarlo.
