Spacing

4px Foundation

Most size and spacing values should be thought of in 4 pixel increments. Examples include font size, line height, margins and padding.

Terminology

Terminology for spacing is derived from Nathan Curtis’ Space in Design Systems.

Inset

Inset describes the space within an element and refers to a padding value. There are also several modifiers that describe how the space is distributed.

Inset Square has equal padding on all four sides.
Inset Squish has more padding on the sides than on the top and bottom.
Inset Stretch has more padding on the top and bottom than the sides.

Stack

Stack describes vertical space between the outside of elements and refers to a margin value. To avoid collapsing margins, we only apply margin to the bottom or right of an element.

Inline

Inline describes horizontal space between the outside of elements, again referring to a margin value.