Wie verhalten sich überlappende padding und margin Angaben: (Plus, Min oder Max)
 

Das ist jetzt eine ganz blöde Frage aber wie wirken sich margin und padding Angaben unterschiedlicher Elemente gegeneinander aus, dazu zwei Beispiele:
1. 2 Div Blöcke untereinander angeordnet, das obere besitzt einen margin-bottom von 10 pixeln und das untere besitzt einen margin-top von 20 pixeln. Was passiert jetzt
a) der Abstand zwischen beiden Blöcken beträgt 30 pixel
oder
b) der Abstand beträgt 20 pixel verwendet wird also die größere von beiden Angaben
c) der Abstand beträgt 10 pixel, die kleinere der beiden Angaben

und das 2. Beispiel, ähnliches Problem
Ein Div Blöck mit einer padding Angabe von 10 pixeln, enthällt ein anderes (Block-) Element (oder ein Bild) mit einer margin Angabe von 20 pixeln (alternativ eine Angabe von 5 pixeln)
Was passiert hier, die Fälle sind analog zum ersten Beispiel und wie sieht es aus wenn das Bild eine margin Angabe von 5 pixelns bestizt (also einen kleineren Margin als das Div padding)?

Hallo braindead,

zu 1. es wird nur der größere „margin“ gezählt, also Antwort b).
zu 2. der „margin“ wird nicht gezählt, egal wie groß er ist. Es gibt aber Ausnahmen.

Suche nach „collapsing margins“.

Grüße: Emil

Ach, das Verhalten im 2. Beispiel ist ja sehr interessant, d.h. also das selbst wenn der margin-top z.b. größer ist als der padding-top des umschließenden Elternelementes wird nur der Padding des Elternelementes berücksichtig? Sehr merkwürdig, denn wann hat man schonmal ein marginbehaftetes Element das sich nicht in einem Elternelement befindet? Aber gut, ich werde deinem Hinweis mal nachgehen.

Nein. Nur Margins kollabieren, nicht Padding.
Collapsing Margins
Uncollapsing Margins (Complex Spiral Consulting)

Ich bin mir nicht sicher ob ich verstehe was du jetzt mit kollabieren meinst (ich kenne das in einem eher desktruktiven Zusammenhang), jedenfalls glaube ich jetzt zu verstehen das es wohl so ist das das margin nicht irgent ein allgemeine Außenabstand ist, sondern konkret der Außenabstand zu einem Benachbartem Element, und der Rand des Elternelement zählt in diesem Fall überhaupt nicht.
So wäre mir auch klar wieso da nur das Padding gilt, wenn ich da nicht dieses merkwürdidige verhalten beobachtet hatte, ich habe also ein Div mit padding:10px und darin ein p Tag mit einem margin-top und absolut zweifelsfrei sorgt eine Variation des margin-tops für eine Verschieibung dieses p-Tags in dere Vertikalen. D.h. nur bei margin-top:0px ist der Abstand zwischen dem Rand des Divs und dem Rand des Ps wirklich 10 Pixel bei größeren Abgaben wird das ganze entsprechende auf den Padding addiert

Und um auf den anderen Teil zurückzukommen, ich habe mir dein Beispiel mit den collabierenden margins angeschaut und verstehe nun wie es zwischen benachbarten Divs wirkten, insbesondere das Detail wenn eines der margin Angaben negativ ist (das dann vom positiven margin der Wert abgezogen wird)

Kollabieren ist die deutsche Übersetzung von "collapse". Ich meine also genau das, was die Spezifikation unter collapsing versteht. Es gibt collapsing margins, keine collapsing paddings.

Na gut ich glaub ich habs jetzt verstanden. Sobald ein Padding im Spiel ist (im Elternelement) kollabiert nichts mehr und insbesondere werden dann Padding und Margin ignoriert, wenn das padding aber auf 0 steht dann wird der Margin in der Tag ignoriert zumindest kollabieren die Abstände dann und es sieht so aus.

Nein. Wie kommst du nur darauf?

Steht in deinem zweiten Link und das ist auch das Verhalten was ich hier im FF sehen kann.

Dann verstehe ich wohl nicht, was du unter "ignoriert" verstehst.
Poste bitte ein Beispiel.