Vertical rhythm

[AndyOGo]

Currently collapsing margins could mess up with distances. To prevent those possible inconsistent dimension, sizes and distances, vertical-rhythm with single direction margin's does a great job and visually feels like a Wiener Walzer.

Feature Request:

• [ ] Cross-Browser friendly
• [ ] Responsive
• [ ] No unexpected distances (eliminate collapsing margins)
• [ ] vertical-rhythm principle - the Goal is that we end up with simple blocks which can be stacked or aligned in a row
• [ ] Markup generated by WYSIWYG-Editor should be considered
• [ ] Typography's line-height (single and multi line)

Collapsing Margins:

Those are one of the main cause of our style issues, like:

• layout - e.g. distance to other nodes
• dimension - e.g. parent eats child's margin and thus does not grow
• backgrounds - e.g. hence parents eats margin, backgrounds get clipped

You can find a detailed explanation of why they happen here https://css-tricks.com/what-you-should-know-about-collapsing-margins/

Proposed Solution:

• Margins go always only in one direction (up or down)
• Each Component has a wrapping element which defines it's distance to others through padding (cause paddings do not collapse)

In BEM words:

• Blocks do not use margin, just padding, border, etc.
• Only elements do use margin too, but only in one direction

Great ressources

• http://csswizardry.com/2012/06/single-direction-margin-declarations/
• https://zellwk.com/blog/why-vertical-rhythms/