Verständnisfrage zur Formatierung

[Beat]

<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>

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?

margin-top von p kollabiert mit margin-top des divs.
Damit hast du einen margin, den du vorher nicht hattest.

mfg Beat