Spacing

SKY UX uses space between elements to separate content. Ample white space is critical to separate individual items and ensure that page content flows together. The base margin and base padding for SKY UX are both 10px, and multiples and fractions are available as necessary.

Styling values are for reference only, and you should not apply them directly. Instead, components should incorporate spacing as necessary.

For defined elements such as buttons, spacing is defined by the component. For new components, start with the base margin and base padding and adjust the spacing as necessary for readability and visual appeal.

Margins

Base margin

10px

$margin

Half margin

5px

$margin-half

¾ margin

7px

$margin-3_4

Margin plus half

15px

$margin-plus-half

Double margin

20px

$margin-double

Triple margin

30px

$margin-triple

Padding

Base padding

10px

$padding

Half padding

5px

$padding-half

¾ padding

7px

$padding-3_4

Padding plus half

15px

$padding-plus-half

Double padding

20px

$padding-double

Triple padding

30px

$padding-triple