Randinfarkt... (collapsing margins)

[Rolf B]

Hallo alle,

ich beantrage einen Collapsing Margins Workshop, der die Aussagen in unserem Wiki sowie mein Verständnis von der Sache mit der Realität abgleicht.

Bei dem Wiki-Aussagen verstehe ich einiges nicht. Mehr Beispiele könnten da für mehr Klarheit sorgen, aber ich behaupte auch, dass nicht alles richtig ist, was da steht, insbesondere der erste Unterpunkt im Abschnitt 2.1

Ich verstehe auch nicht, warum das Wiki das Thema gleich hintereinander redundant behandelt. Aus meiner Sicht ist Abschnitt 2.3 eine Neufassung von Abschnitt 2.1+2.2.

Bevor ich das neu schreibe, möchte ich erstmal sicher sein, dass ich es auch verstanden habe.

Oder kann es sein, dass sich hier in den letzten Jahren grundsätzlich etwas im Browserverhalten verändert hat und heute Margins zusammenfallen, die früher separiert blieben?

Rolf

[Matthias Scharwies]

Servus!

Hallo alle,

ich beantrage einen Collapsing Margins Workshop, der die Aussagen in unserem Wiki sowie mein Verständnis von der Sache mit der Realität abgleicht.

Am nächsten Samstag um 11:00 oder 16:00?

Bei dem Wiki-Aussagen verstehe ich einiges nicht. Mehr Beispiele könnten da für mehr Klarheit sorgen,

Vor allem Live-Beispiele, bei denen man die getroffenen Aussagen gleich überprüfen kann.

aber ich behaupte auch, dass nicht alles richtig ist, was da steht, insbesondere der erste Unterpunkt im Abschnitt 2.1

ok, schau ich mal

Ich verstehe auch nicht, warum das Wiki das Thema gleich hintereinander redundant behandelt. Aus meiner Sicht ist Abschnitt 2.3 eine Neufassung von Abschnitt 2.1+2.2.

Ja, wsl bei der Zusammenfassung zu einem Tutorial hintereinander zusammengepastet.

Bevor ich das neu schreibe, möchte ich erstmal sicher sein, dass ich es auch verstanden habe.

Aslo den Samstag abwarten? oder am Mittwoch um 20:15?

Oder kann es sein, dass sich hier in den letzten Jahren grundsätzlich etwas im Browserverhalten verändert hat und heute Margins zusammenfallen, die früher separiert blieben?

Nein, das hätte man/ich irgendwo mitgekriegt.

[EDIT]: Für mich ist das eig. kein Thema, weil ich vertikale margins außer evtl. bei Menüs überhaupt nicht setzen würde und der Inhalt einfach nach unten wandert (um wie viel, interessiert mich nicht so.)

Was ist dein use case? [/EDIT]

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

mein use case ist Verständnis des Themas. Insbesondere was die Trigger sind, die das Collapsing aufheben. Sonst nichts.

Ich war bei html.de unterwegs und da hatte jemand eine Frage bezüglich Margins (ich hab da ein <p> vor den header gesetzt und da ist ne Lücke geblieben, wieso?) margin-bottom:0 hat geholfen, aber eigentlich wollte ich ihm auch einen Link auf das Thema zum Collapsing anbieten - und da war ich vom Wiki nur verwirrt.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

mein use case ist Verständnis des Themas.

ok

Insbesondere was die Trigger sind, die das Collapsing aufheben.

Float und absolute Positionierung, oder?

Ich war bei html.de unterwegs und da hatte jemand eine Frage bezüglich Margins (ich hab da ein <p> vor den header gesetzt und da ist ne Lücke geblieben, wieso?) margin-bottom:0 hat geholfen, aber eigentlich wollte ich ihm auch einen Link auf das Thema zum Collapsing anbieten - und da war ich vom Wiki nur verwirrt.

Evtl. ein Beispiel mit

• Hintergrundraster der Linien,
• border/background-color bei p (oder anderen Elementen), damit der margin sichtbar wird

Mittwoch oder Samstag?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

float eben nicht, scheint mir.

Aber du hast Urlaub!

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

float eben nicht, scheint mir.

Diese Beispiele zeigen's anschaulich:

https://www.joshwcomeau.com/css/rules-of-margin-collapse/

Aber du hast Urlaub!

Wie du willst, Mittwoch wäre trotzdem ok, vom 31.-08. sind wir kind(er)los, vom 09.-20. sind wir alle unterwegs.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Josh habe ich durchgelesen. Float und BFC lässt er aber weg, und genau da streikt es bei mir

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Josh habe ich durchgelesen.

Ich habe ihn nachgebaut, dabei aber die div-Elemente durch p ersetzt. Die margins sind Pseudoelemente.

Hier die einfache Version:

Beispiel:Collapsing-margins-1.html

Test-Wiki

Float und BFC lässt er aber weg, und genau da streikt es bei mir

Da muss ich mir noch ein gutes Beispiel aussuchen, wo float überhaupt Sinn macht. Wer bis heute Abend eine Idee hat, immer her damit!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

meine konkrete Verwunderung:

<div style="float:left; margin-bottom:100px">I am the X</div>
<div style="clear:both; margin-top: 100px">And solving for Y</div>

Die Margins fallen zusammen. Aber bei Float sollen sie das doch nicht.

Weitere Spielereien: https://jsfiddle.net/Rolf_b/9u0b7xeg/

(2) ist das obige. Für (3) behauptet das Wiki, dass sie nicht zusammenfallen sollten. (1), (4) und (5) ist klar, wobei (4) grenzwertig ist. Die Spec macht's aber klar: BLFs sperren Margins nur für Kindelemente ein.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

meine konkrete Verwunderung:

<div style="float:left; margin-bottom:100px">I am the X</div>
<div style="clear:both; margin-top: 100px">And solving for Y</div>

Die Margins fallen zusammen. Aber bei Float sollen sie das doch nicht.

Stimmt, komisch!

Hier mein Beispiel 2: Test-Wiki

Evtl. sollten wir nicht alle Fälle erschöpfend behandeln. MDN ist da auch eher kurz.

1. Ein pixelgenaues Layout ist zu vermeiden - Inhalte wandern nach unten!
2. Bei Flexbox, Grid etc. spielt das eh keine Rolle!
3. Wenn die Elemente padding oder border haben, auch nicht!

Bis heute Abend!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Bis heute Abend!

Daraus wird nichts werden, sorry.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Bis heute Abend!

Daraus wird nichts werden, sorry.

Kein Problem, bis die Tage!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen,

ich habe den Abschnitt um fast 6KB gekürzt - die sind in die beiden Live-Beispiele geflossen:

Zusammenfallende Außenabstände

meine konkrete Verwunderung:

<div style="float:left; margin-bottom:100px">I am the X</div>
<div style="clear:both; margin-top: 100px">And solving for Y</div>

Die Margins fallen zusammen. Aber bei Float sollen sie das doch nicht.

Im Beispiel zwei unter 6. siehst du zwei floats - dort fallen sie nicht zusammen.

6. Absätze mit float
<p style="float:left; --mar-bottom: 2em;margin-bottom: var(--mar-bottom);">1. Absatz </p>  
<p style="float:left;clear:both; --mar-top: 2em;margin-top: var(--mar-top)">2. Absatz </p>

Wenn man nur das untere float lässt, gleicher Effekt!

---

Ich würde da nicht mehr schreiben.

Vorher gab es ein Codebeispiel, wo ein div durch sehr hohes negatives margin die Reihenfolge mit dem vorherigen div getauscht hatte. So etwas sollte man nicht propagieren.

Herzliche Grüße

Matthias Scharwies