Pierre: Anderes Verhalten bei div mit und ohne Border

Beitrag lesen

Hallo

Ich hab ein kleines Problem, wo ich gerne mehr drüber wissen möchte, wie und warum es zustande kommt. Dazu hab ich ein Müsterchen erstellt, dass ihr hier sehen könnt:

Hier gehts zur Musterseite

Das Problem ist folgendes. In meinem Beispiel haben alle Boxen eine fixe Höhe von 120px mit Hintergrundbild und darin ein <p> mit einem Abstand von 50 Pixeln von oben.

Bei den obersten beiden Boxen steht das <p> mit margin-top:50px, bei den nächsten beiden Boxen ist <p> mit padding-top:50px definiert. Box 2 und 4 haben noch ein Border.

Nun meine Frage: Wieso funzt des ganze in der obersten Box nicht? Das margin, wird hier auf das Mutterelement angewendet. Sobald man dem aber einen Border gibt, tut es so, wie man es erwartet. Bei padding gibts das Problem nicht ... ???? verwirr

Kann mir jemand sagen, wieso das so ist und wo man hierüber genaueres nachlesen kann?

Und bitte keine Vorschläge, dass ich einfach nen Border um das Ding machen soll. Das geht in meinem finalen Design nicht. Ich suche wirklich nach der Erklärung, damit mir dieses Verhalten vielleicht auch einleuchtet.

Herzlichen Dank Pierre