Skip to main content

Pivotal UI

v18.1.0
Modifiers / Whitespace

Whitespace

Use the whitespace modifiers to control the spacing around elements (margin) and within elements (padding).

Classes

Whitespace class names are composed of three parts, following this format: {spacing-type}{direction}{size}. The tables below list the possible values for each part. Some examples:

  • mtxl: margin-top-extra-large (add a 32-pixel margin on top)
  • pan: padding-all-none (remove padding on all sides)
  • mvs: margin-vertical-small (add 2-pixel margins on the top and bottom)
Spacing typeDescription
pPadding (spacing within an element's borders)
mMargin (spacing outside of an element's borders)
DirectionDescription
aAll sides
tTop only
rRight side only
bBottom only
lLeft side only
hLeft and right sides (horizontal)
vTop and bottom (vertical)
SizeDescription
nNone (0px)
sSmall (2px)
mMedium (4px)
lLarge (8px)
xlExtra large (16px)
xxlExtra extra large (24px)
xxxlExtra extra extra large (32px)
Padding modification example

A normal paragraph

A paragraph with large padding

Imports

Import CSS:

import 'pivotal-ui/css/whitespace';