Skip to main content

Space

Stack

Stack spacing adds a margin to the bottom of elements. The stack space arranges components in a vertical rhythm.

TokenValue
space-stack-x1px
space-stack-2x2px
space-stack-4x4px
space-stack-6x6px
space-stack-8x8px
space-stack-10x10px
space-stack-12x12px
space-stack-16x16px
space-stack-20x20px
space-stack-24x24px
space-stack-32x32px
space-stack-48x48px
space-stack-64x64px

Inline

Inline spacing proportions create consistent right margins to elements. The inline space arranges components in a horizontal row.

TokenValue
space-inline-x1px
space-inline-2x2px
space-inline-4x4px
space-inline-6x6px
space-inline-8x8px
space-inline-10x10px
space-inline-12x12px
space-inline-16x16px
space-inline-20x20px
space-inline-24x24px
space-inline-32x32px
space-inline-48x48px
space-inline-64x64px

Inset

Inset spacing adds equal padding to all four sides of an element.

TokenValue
space-inset-x1px
space-inset-2x2px
space-inset-4x4px
space-inset-6x6px
space-inset-8x8px
space-inset-10x10px
space-inset-12x12px
space-inset-16x16px
space-inset-20x20px
space-inset-24x24px
space-inset-32x32px
space-inset-48x48px
space-inset-64x64px

Exceptions

There are always exceptions to the rule. When the text or icon is vertically centered inside a component, the top and bottom padding can be any size.