Anderes Verhalten bei div mit und ohne Border

[Pierre]

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

[Detlef G.]

Hallo Pierre

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

Box model - Collapsing margins

Auf Wiederlesen
Detlef

[Pierre]

Danke Detlef.

Und wenn jemand noch was in deutsch dazu kennt, bin ich auch nicht böse, weil ich im englisch net allzu gut bin. Aber ich sehe, dass in der englischen Dokumentation dieses Kapitel viel ausführlicher beschrieben ist als in der deutschen.

Pierre

[Ingo Turski]

Hi,

Und wenn jemand noch was in deutsch dazu kennt, bin ich auch nicht böse, weil ich im englisch net allzu gut bin.

Bitte: http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap08.html#heading-8.5.4�
Ist aber auch nicht einfach zu verstehen. ;-)
Aber kurz gesagt: Dein P hat ein margin-top, das jedoch die Position des Elternelements nicht ändert.

freundliche Grüße
Ingo

[Pierre]

Hallo Ingo

das stimmt so nicht ganz. Ich hab mein Müsterchen nochmal ein bisschen umgebaut, dass es vielleicht ein bisschen klarer ist. Das Problemböxchen ist nun das zweite von oben. Das padding-top vom p-Tag innerhalb der zweiten Box bezieht sich auf den unteren Border der obersten Box. Und das verwirrt mich doch ziemlich, da ja dieses p-Tag innerhalb der zweiten Box liegt. Und deshalb verändert es die Position des Elternelements aus meiner Sicht schon, denn dies dürfte nach meiner Meinung nur 20px Abstand zur oberen Box haben, da diese ja ein margin-bottom von 20px definiert hat ...

Checks des noch? Aber ich glaube ich durchschau die Sache schon langsam nur seh ich keinen Sinn darin, dass das margin anscheinend einen Border braucht auf den es sich beziehen kann, auch wenn der Border von einem aussenstehenden Element kommt.

Ich hoffe, du kannst mir noch folgen.

Ach, ja und hier ist noch mein zweites Müsterchen. Habe die Boxen mit den Rändern und die ohne Ränder in der Reihenfolge getauscht und etwas fettere Ränder gegeben, dass mans etwas besser sieht und auch den p's hab ich nen Border gegeben, damit das margin und padding auch etwas klarer werden.

Test1

Test2

[Detlef G.]

Hallo Pierre

... nur seh ich keinen Sinn darin, dass das margin anscheinend einen Border braucht auf den es sich beziehen kann, auch wenn der Border von einem aussenstehenden Element kommt.

Zusammenstoßende Ränder sollen sich nicht addieren, damit bei
aufeinanderfolgenden Elementen keine doppelten Abstände entstehen.
Dadurch kann ich z.B. für Absätze margin-top und margin-bottom angeben,
ohne dass es zwischen den Absätzen zu einem doppelt so großen Abstand kommt
wie oberhalb und unterhalb dieser.
Ein Nebeneffekt dabei ist allerdings, dass dies genauso auf die Ränder
ineinanderliegender Elemente zutrifft, wo der daraus entstehende Effekt dann
etwas verwirrend ist.

Test1

Test2

Die Boxen verhalten sich genau so, wie erwartet.

Auf Wiederlesen
Detlef