HTML Margin collapse ("elegant") umgehen!?

[###Zaunpfahl###]

Problem ist ein wenig schwierig zu erklären.
Hab auch schon mal darüber gelesen, aber irgendwie weiß ich nicht mehr nach was ich googlen muss damit ich das manual wieder finde.
Okay ist mir jetzt während dem schreiben wieder eingefallen....
https://css-tricks.com/what-you-should-know-about-collapsing-margins/
Ich hab das Problem mit den angrenzenden.

Dennoch kann ich das Problem nicht lösen O.o, entweder ich bin wirklich zu doof oder es wirklich so dermaßen behindert.

Hier ein codepen wo das problem besteht: https://codepen.io/tuppabox/pen/KdrWeX


Ich möchte das Problem wenn möglich natürlich auch elegant lösen, also ich kann auch einfach ein <div> dazwischen werfen...ja das funktioniert ist aber wirklich sehr unschön und ich hoffe unnötig O.o.

Mit pseudoelemnten in css würde mir "gefallen" aber funktioniert irgendwie nicht.

Jemand eine gute Idee??

 

[FranzvonAssisi]

Kannst du das Problem vielleicht irgendwo beschreiben, sonst ist es schwierig dir zu helfen...
Im Codepen sehe ich jetzt erstmal kein Problem...

Achso, sry... Wo ist denn das Problem, wenn der margin collapsed? (quick & dirty)

 

[NullPointer]

So vielleicht? https://codepen.io/ulrichsg/pen/BWdxOa

 

[###Zaunpfahl###]

1. Möchte ich wissen, welche Mögilchkeiten gibt es und was ist die meiner Meinung nach beste
2. Habe ich ein javascript ist hier nicht eingebaut um zu scrollen. Also einen Effekt und dieser Orientiert sich an Punkten zwischen den <section>, also praktisch ausgedrückt ist es eigentlich der section da wo er beginnt. Diesen habe ich als offset().top Wert.
Ich versuchs mal Bildlich

[...]
margin
_______________________
_______________________
<----- hier ist der punkt
margin
-------------
border
-------------
padding
-----------
content
-----------
[...]

naja wenn jetzt margin collapsed wird die ganze Sache unsymetrisch und stimmt nicht mehr so wie ich mir das gedacht hab

Ergänzung (14. März 2017)

danke Nullpuntoir

ist schon mal eine Möglichkeit


leider ist es dann immer noch "unsymmetrisch"
Ich würde gerne falls möglich bei "margin: xxvw;" bleiben....sieht aber schlecht aus....

Ergänzung (14. März 2017)

aja ich eklär nochmal wos collapsed
also zwischen den <section> müsste der margin bzw. der Abstand doppelt so groß sein wie oben, rechts, links
Weil hier die Container aneinander grenzen. Aber es ist genauso dick, da es collapsed.

Wieso dieser Scheißdreck immer noch da drin ist in den Browsern ist mir wirklich ein rätsel, man könnte ja wenigstens eine Option schaffen um den schmarrn zu deaktivieren, das braucht doch so gut wie niemand oder? Total unlogisch
Entweder ich programmier mir so ein collapse oder ich lass es, aber nativ wtf.... manche sachen sind einfach total bescheuert bei den Webtechniken

Ergänzung (15. März 2017)

Jetzt hab ichs endlich!!! Jetzt muss ich nochmals sagen...so ne Kacke!

1. Okay erste Möglichkeit für oldschool
Man macht aus den <section> einfach "display: inline-block;"
Wer sowieso kein vw und vh benutzen möchte muss dann mit width: 100% arbeiten... natürlich von oben abwärts also html, body, main....
Sollte dann auch im IE und son kaas funktionieren.
Evtl. Problem die Parents können nicht mehr so gesteuert werden dass sie nur noch so groß wie ihr Inhalt sind.

2. Die Moderne
Man gibt dem Parent folgendes: "display: flex; flex-direction: column;"
https://codepen.io/tuppabox/pen/PpKdZX