Add more consistent padding config to components

[rreusser]

The problem: components are positioned in fractional coordinates, but axis labels take up a fixed amount of space relative to the screen. This makes it effectively impossible to create a consistent amount of padding between the plot and the labels when the plot size is changed. At the moment there seems to be some xpad and ypad attributes, but I think it needs to be more complete and consistent.

A solution: I propose adding a common padding: {t: ..., r: ..., b: ..., l: ...} attribute to most components. Ideally the logic could be hoisted up a level and DRYd up, but realistically, I feel like all components might just have to implement this positioning themselves. The result though is that it would be possible to carefully and precisely align components. This approach is consistent with what most people would probably expect based on html experience and is backward compatible if it defaults to zeros. Together with fractional positioning, I feel like you could at least get way closer to a satisfying layout.

Note: I'm running into this quite a bit as I try to align multiple components in an aesthetically pleasing way and trying to line up a slider with buttons is turning out to be particularly painful. Padding would instantly solve this.

Example: With identical config (apart from the size) that uses fractional padding to clear the axis labels, the small plot has a nice amount of space between the axis and the controls; the large plot has way too much space. http://codepen.io/rsreusser/pen/NRgbJy?editors=0010

[rreusser]

As discussed with @etpinard, the solution sounds like:

• components receive pad: {t, r, b, l}
• components are responsible for accounting for their own padding and including it in the pushmargin'd sizes
• cleanLayout/cleanData takes previous properties like xpad/ypad and applies backward compatibility

[rreusser]

Dupe of #997. I'm fine keeping that one open :)