Der p-tag steht ja für einen Absatz. Bei einem Absatz ist ja logischerweise immer ein Umbruch ( bzw. 2 Zeilenumbrüche ). Gib deinem p einfach ein margin-top:- ~ 5-10px; und deinem footer ebenfalls.
Als Lösung ist das wohl nicht das Richtige, aber mit XHTML-Doctype ist das Problem nicht existent.
Ich bin mit HTML 5 leider noch nicht all zu vertraut und kann dir deshalb keine Erklärung dafür liefern, aber möglicherweise reicht dir ja der Denkansatz.
Der Abstand wird vom img-Element erzeugt. Das liegt glaube ich daran, dass ein img-Element „inline“ ist und deshalb Zeilenhöhe und -ausrichtung mit einkalkuliert.
Daher hilft: header img { display: block; }
Es ist aber semantisch korrekter, solche Verzierungsgrafiken als Hintergrundbilder (background-image) zu setzen (oder mit den neuen Rahmenfähigkeiten von CSS3 zu erzeugen).
Leider funktioniert es doch nicht so perfekt. Es sind immernoch kleine Lücken da. Außerdem sind img Elemente nicht zum Layouten da.
Wenn du auf Grafiken nicht vertichten kannst oder willst, dann sieh mal hier [B]Skalierbare Info-Boxen mit abgerundeten Ecken[/B]