Margin & Padding


Utility classes for positioning.

Every bit of margin and pading throughout Bluprnt utilizes a value from our spacing scale.

The margin and padding utilities work by combining a base letter, a Directional modifier, and a Spacing Scale modifier.

See below for the letter/number and it’s meaning.

  p = padding
  m = margin

Directional Modifiers:
  x = horizontal
  y = vertical
  t = top
  r = right
  b = bottom
  l = left

Spacing Scale Modifiers
  0 = none (0px)
  1 = 1st step in spacing scale (2px)
  2 = 2nd step in spacing scale (5px)
  3 = 3rd step in spacing scale (10px)
  4 = 4th step in spacing scale (20px)
  5 = 5th step in spacing scale (30px)
  6 = 6th step in spacing scale (40px)
  7 = 7th step in spacing scale (50px)
  8 = 8th step in spacing scale (60px)

Usage example:

<div class="u-mb4">I have a margin bottom of 20px.</div>
<div class="u-m3">I have a margin of 10px.</div>
<div class="u-p7">I have a padding of 50px.</div>
<div class="u-pl2">I have a padding left of 5px.</div>

Responsive Usage example:

<div class="u-pb4  u-sm-pb5  u-md-pb6  u-lg-pb7">
  I have different bottom padding at various browser widths!

Misc Helpers

Class Name Responsive Classes Description
u-mxAuto u-[sm|md|lg]-mxAuto Set left and right margins to auto. Useful for centering a block element.
u-lastChild0 none Removes bottom margin for the last child inside an element.