Whitespace/margin/padding rules in scss

Problem

we currently use a huge variety of margin, padding, line-height, and other methods for spacing elements. This means:

• Inconsistent spacing that looks bad
• alignment bugs all the time, recent example https://gitlab.com/gitlab-org/gitlab-ce/issues/33992

Example, showing one item using padding that doesn't have space below, and one with even margin

Proposal

• Decide/document a preferred way of spacing elements
• introduce default low-specifity rules

Possibilities:

• Single direction margin direction, with rules for when to use margin or padding
• [LEGO-style](https://alistapart.com/article/learning-from-lego-a-step-forward-in-modular-web-design, padding only
• Add more functional CSS helper classes (e.g. Tachyons). While fully functional classes go a bit far, we do a loooot of margin: 0 and 0 auto
• lobotomised owls for child padding. e.g https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12349/diffs#f06c7f313a79a2b350d89b9c18b36ab8986980a5_10_10

Related issues

https://gitlab.com/gitlab-org/gitlab-ce/issues/29942 covers the design side but not the implementation