Margins & Padding

Define margins and padding using classes that scale with parent sizes. The classes follow the pattern: .u-<mg|pd>[-<top|bottom|left|right>]--<xxxlg|xxlg|xlg|lg|md|sm|xs|xxs>. So setting a margin on all sides of 1em would use .u-mg--md and setting a margin of 1.5em only on top would use .u-mg-top--xlg.


All sides; .u-mg--*, .u-pd--*
Top; .u-mg-top--*, .u-pd-top--*
Bottom; .u-mg-bottom--*, .u-pd-bottom--*
Left; .u-mg-left--*, .u-pd-left--*
Right; .u-mg-right--*, .u-pd-right--*