Verständnisfrage zur Formatierung

[Encoder]

Hallo Ihr
Durch ein paar Versuche bin ich auf folgende Konstellation gestoßen:
<div class="boxFrame" style="width:600px; margin:0px auto;">
<div style="background:yellow; margin:0px;">Überschrift</div><div style="background:red; margin:0px; padding:10px 10px 10px 10px;">
<p>Hier steht Text</p>
</div></div>

Das erzeugt zwei divs übereinander, mit denen ich Hintergrundeffekte machen will. Bisher ist alles ok.
Wenn man das padding von 10 10 10 10 auf 0 10 10 10 ändert, also oben kein Abstand, dann rutschen die divs plötzlich auseinander. Warum ist das so?