Spacing

Padding and margin utility classes are named using the format: env-{property}-{specifier}--{size}

Valid values for property

  • m for margin
  • p for padding

Valid values for specifier

  • top
  • right
  • bottom
  • left
  • horizontal
  • vertical
  • around

Valid values for size

  • 0
  • a auto, only applicable to margin
  • xxx-small (0.125em)
  • xx-small (0.25em)
  • x-small (0.5em)
  • small (0.75em)
  • medium (1em)
  • large (1.25em)
  • x-large (1.5em)
  • xx-large (1.75em)
  • xxx-large (2em)

Invert values for margin by adding the negative modifier

  • env-m-{specifier}--negative

Spacing examples

env-m-around--medium
env-p-around--medium
env-m-horizontal--xxx-large
env-p-vertical--large
env-m-horizontal--large
env-m-horizontal--negative
env-m-vertical--medium
env-p-around--small
env-m-top--negative
env-m-top--medium
env-m-right--medium
env-m-bottom--small
env-m-left--xxx-large
env-p-around--medium
env-w--50
env-m-vertical--medium
env-m-horizontal--a
env-p-around--medium