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?

[Cheatah]

Hi,

Durch ein paar Versuche bin ich auf folgende Konstellation gestoßen:

diese Konstellation sollte *unbedingt* das Element mit dem Text "Überschrift" durch ein Überschriften-Element wie z.B. <h1> ersetzen.

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?

Der Suchterm lautet "collapsing margins".

Cheatah

[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

[Encoder]

Ok ich hab zwar in Firebug die Margins der divs angesehen, aber das p ignoriert.
Danke fürs draufhelfen!

[Encoder]

Nachdem ich drüber geschlafen hab ist mir das doch nicht mehr so klar. Ich hab zwar alles mögliche über collapsing margins gefunden, aber es scheint eins der größeren Rätsel von CSS zu sein, warum das so ist. Die Webseiten die ich finde scheinen mehr mit auswendig lernen zu tun zu haben, als mit kapieren?!

Laut Firebug sieht das so aus: Der Margin des p schaut aus dem unteren div oben raus, wenn das div padding-top:0 hat. Der Abstand wird also vom margin-top des p erzeugt. Obwohl p im div liegt?
Bei padding-top:1 liegt p dann wirklich mitsamt seinem margin komplett innerhalb des roten div und es sieht so aus wie es soll.

Und das hat jetzt wirklich was mit kollabierenden margin/padding zu tun? Ich weiß jetzt wie ich das weg kriege, aber Sinn macht das trotzdem keinen für mich.

[Der Martin]

Hallo,

Ich hab zwar alles mögliche über collapsing margins gefunden, aber es scheint eins der größeren Rätsel von CSS zu sein, warum das so ist.

das sehe ich auch so. Ich konnte noch kein Beispiel finden, wo man aus dem Phänomen der Collapsing Margins einen Nutzen ziehen könnte; ich finde immer nur Fragen, wie man den Effekt vermeiden könnte.

Also was haben sich die Burschen gedacht, als sie so etwas in den Standard aufgenommen haben?

Laut Firebug sieht das so aus: Der Margin des p schaut aus dem unteren div oben raus, wenn das div padding-top:0 hat. Der Abstand wird also vom margin-top des p erzeugt. Obwohl p im div liegt?
Bei padding-top:1 liegt p dann wirklich mitsamt seinem margin komplett innerhalb des roten div und es sieht so aus wie es soll.

Ja. Soweit ich es verstanden habe, fallen margins an Ober- oder Unterkante von zwei Elementen zusammen (es zählt also nur noch der größere der beiden mergins), wenn diese Elemente direkt aufeinander folgen oder verschachtelt sind.
Es sei denn, mindestens eins der Elemente hat noch padding oder border; in diesem Fall wird die Collapsing-Margins-Regel nicht angewendet.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Also was haben sich die Burschen gedacht, als sie so etwas in den Standard aufgenommen haben?

Dass es sinnvoll ist, wenn Abstände zusammenfallen.

http://forum.de.selfhtml.org/archiv/2008/10/t178190/#m1174861 ff.

Qapla'

[Encoder]

Also was haben sich die Burschen gedacht, als sie so etwas in den Standard aufgenommen haben?

Die Erklärung von Gunnar macht schon Sinn finde ich. Dass so ein Abstand nur einmal Sinn macht, leuchtet mir ein. Davon hab ich auch schon gehört.

Es sei denn, mindestens eins der Elemente hat noch padding oder border; in diesem Fall wird die Collapsing-Margins-Regel nicht angewendet.

Darauf wär ich halt so schnell nicht gekommen. Ich muss da auch nochmal in einer stillen Minute drüber nachdenken.

[Der Martin]

Hi,

Also was haben sich die Burschen gedacht, als sie so etwas in den Standard aufgenommen haben?
Die Erklärung von Gunnar macht schon Sinn finde ich.

da bin ich anderer Ansicht: Wenn ich als Autor Abstände definiere, dann tu ich das ja nicht aus Spaß, sondern weil ich möchte, dass die eingehalten werden. Selbstverständlich auch kumuliert, wenn es sich so ergibt. Ergo trickse ich meist ein wenig, um zu verhindern, dass Margins zusammenfallen. Notfalls auch mal mit einem Border in der gleichen Farbe wie der Hintergrund.

Dass so ein Abstand nur einmal Sinn macht, leuchtet mir ein.

Es mag Fälle geben, in denen es tatsächlich sinnvoll ist, nicht die Summe zweier Abstände zu betrachten, sondern einen davon abweichenden Wert. Dann gebe ich das aber auch so an - nach dem Motto: Wenn ich weniger Abstand will, sag ich das schon.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Ergo trickse ich meist ein wenig, um zu verhindern, dass Margins zusammenfallen. Notfalls auch mal mit einem Border in der gleichen Farbe wie der Hintergrund.

Und wenn der Hintergrund nun ein Bild ist? Den Farbwert "transparent" kennst du?

Warum setzt du nicht entweder 'margin-top' oder 'margin-bottom' für alle Elemente auf "0", wenn dir zusammenfallende Ränder nicht behagen, und setzt den jeweils anderen Rand aud den gewünschten Wert?

Ich jedenfalls begrüße das Konzept der zusammenfallenden Ränder. Textabsätze usw. haben jeweils oben und unten Randabstand und man muss sich nicht darum kümmern, dass der Abstand zwischen zwei Absätzen o.a. nicht zu groß wird.

Qapla'

[Der Martin]

Hi,

Ergo trickse ich meist ein wenig, um zu verhindern, dass Margins zusammenfallen. Notfalls auch mal mit einem Border in der gleichen Farbe wie der Hintergrund.
Und wenn der Hintergrund nun ein Bild ist? Den Farbwert "transparent" kennst du?

ja, und setze ihn bei Bedarf auch ein. Hätte ich das auch noch erwähnen sollen? Nein, ein zweites Beispiel war im Moment unerheblich.

Warum setzt du nicht entweder 'margin-top' oder 'margin-bottom' für alle Elemente auf "0", wenn dir zusammenfallende Ränder nicht behagen, und setzt den jeweils anderen Rand aud den gewünschten Wert?

Weil mich die Collapsing Margins auch eiskalt erwischen, wenn Elemente ineinander verschachtelt sind und zwei obere Ränder zusammenfallen.
Davon abgesehen mache ich genau das, was du vorschlägst: Aus typographischer Sicht haben normale Textabsätze für mich kein margin-top (sie fangen einfach da an, wo sie anfangen), sondern nur ein margin-bottom. Überschriften halte ich eher mit einem padding-top auf Distanz.

Problematisch wird's dann, wenn ich abseits des herkömmlichen Text-Layouts Abstände zwischen den Elementen individuell festlegen will, um bestimmte optische Effekte zu erreichen. Dann kann ich so einen Automatismus noch weniger gebrauchen als bei Fließtext.

Ich jedenfalls begrüße das Konzept der zusammenfallenden Ränder. Textabsätze usw. haben jeweils oben und unten Randabstand und man muss sich nicht darum kümmern, dass der Abstand zwischen zwei Absätzen o.a. nicht zu groß wird.

Da haben wir wohl unterschiedliche Ansichten zum Layout.

Ciao,
 Martin

[Patrick Andrieu]

Hallo Martin!

Den Farbwert "transparent" kennst du?
ja, und setze ihn bei Bedarf auch ein.

Wenn ich mich die interessante Diskussion einklinken darf... Der IE 6 kennt das nicht bei border, oder habe ich etwas übersehen?

border: 1px transparent solid

erzeugt beim IE 6 einen schwarzen, 1px-ligen Rahmen...

Gibt es dagegen einen Werkdrumrum?

Viele Grüße aus Frankfurt/Main,
Patrick

[Gunnar Bittersmann]

@@Patrick Andrieu:

nuqneH

Gibt es dagegen einen Werkdrumrum?

IE 6 nicht mehr beachten; er ist mittlerweile irrelevant geworden. Funktionieren sollte eine Seite noch in ihm, aber über kosmetische Probleme würde ich mir keinen Kopf mehr zerbrechen.

Qapla'

[Gunnar Bittersmann]

@@Encoder:

nuqneH

[…] es scheint eins der größeren Rätsel von CSS zu sein, warum das so ist.

Welche Frage lässt [CSS2 §8.3.1] da noch offen?

„In dieser Spezifikation bedeutet der Ausdruck _zusammenfallende Ränder_, dass benachbarte Ränder (die durch keine Polsterungs- oder Rahmenbereiche voneinander getrennt sind) von zwei oder mehr Boxen (die nebeneinander liegen oder verschachtelt sein können) so zusammenfallen können, dass sie einen einzigen Rand bilden.“

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Welche Frage lässt [CSS2 §8.3.1] da noch offen?

Hier sollte man auch einen Blick in [CSS21 §8.3.1] werfen; in CSS 2.1 wurde an der Stelle einiges ergänzt.

Qapla'

[Der Martin]

Hi,

Welche Frage lässt [CSS2 §8.3.1] da noch offen?

die hier explizit gestellte Frage nach dem "warum".
Eine Festlegung, auch wenn sie Definitionscharakter hat, ist solange sinnlos, wie sie nicht in ihrem typischen Kontext plausibel begründet werden kann.

Ciao,
 Martin

[Beat]

Laut Firebug sieht das so aus: Der Margin des p schaut aus dem unteren div oben raus, wenn das div padding-top:0 hat. Der Abstand wird also vom margin-top des p erzeugt. Obwohl p im div liegt?
Bei padding-top:1 liegt p dann wirklich mitsamt seinem margin komplett innerhalb des roten div und es sieht so aus wie es soll.

collapsing margins sollte man immer diskutieren im Zusammenhang mit dem verwendeten Doctype.
Das Verhalten ist für standard mode radikal verschieden vom quirks mode.
Es ist eine der unangenehmen Nebenwirkungen, wenn man Seiten auf standardsmode stellt, dass sich einige Baustellen auftun.

mfg Beat

[ChrisB]

Hi,

collapsing margins sollte man immer diskutieren im Zusammenhang mit dem verwendeten Doctype.
Das Verhalten ist für standard mode radikal verschieden vom quirks mode.

Ich sehe nicht, warum letzterer überhaupt diskussionsrelevant sein sollte?

MfG ChrisB

[Beat]

Ich sehe nicht, warum letzterer überhaupt diskussionsrelevant sein sollte?

Als Arzt kannst du natürlich die Patienten vor die Türe weisen, solange sie invalide sind.

mfg Beat

[ChrisB]

Hi,

Ich sehe nicht, warum letzterer überhaupt diskussionsrelevant sein sollte?

Als Arzt kannst du natürlich die Patienten vor die Türe weisen, solange sie invalide sind.

Zwar ist, Herr Doktor, nicht alles, was hinkt, ein Simulant - aber in diesem Falle empfiehlt die Versicherung nicht, es auf einen Vergleich ankommen zu lassen.

MfG ChrisB