Feat: Add `margin` and `gap` properties

[caesarsol]

We need to define a couple things:

• Should the properties add between each other, or be exclusive?
• How should the gap work?
  • @ivanross suggests an approach like div > * + * { margin-left: x } where it's placed between childs only if the children are >1.
• Should gap be number | [number, number], to allow vertical/horizontal?

cc @ivanross @marcofugaro @gsimone (#1)

[gsimone]

I'd expect a behaviour similar to css, so

• both would be added

| margin | (content: |margin|content|gap|content|margin|) | gap | content | margin |

It does get a bit weird since you'd have to calc a bunch of things manually. Maybe gap would be subtracted to the desired total width?

width: 600
gap: 20
	width: 300 => width: 290, left: 0
    width: 300 => width: 290, left: 20

[ivanross]

Should gap be number | [number, number], to allow vertical/horizontal?

Since direction cannot be both vertical and horizontal, it might be enough number

I'd expect a behaviour similar to css

Totally agree

[gsimone]

Since direction cannot be both vertical and horizontal, it might be enough number

Good point, if you later decide to implement a grid-like container, then you can introduce the array version