Skip to main content

Pivotal UI

Modifiers / Whitespace


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


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)
aAll sides
tTop only
rRight side only
bBottom only
lLeft side only
hLeft and right sides (horizontal)
vTop and bottom (vertical)
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


Import CSS:

import 'pivotal-ui/css/whitespace';