Spacing

Overview

There’s a wide range of margin and padding utilities to adjust the spacing of elements.

Class Notation

Spacing utilities have abbreviated classnames for ease of use. The first 2 letters indicate the property and side that will be changed and the number is the spacing value. For example, the class .mt-10 will apply a margin-top of 1rem (which equals to 10px).

Below is a breakdown of the available options. You can compose a spacing utility class by choosing a property from each bucket. Note that side is optional, if you leave it blank it will apply to all four sides.

Property
  • m Margin
  • p Padding
Side (optional)
  • All
  • t Top
  • r Right
  • b Bottom
  • l Left
  • x Horizontal
  • y Vertical
Space
  • 0 0
  • 5 0.5rem
  • 10 1rem
  • 15 1.5rem
  • 20 2rem
  • 25 2.5rem
  • 30 3rem
  • 35 3.5rem
  • 40 4rem
  • 45 4.5rem
  • 50 5rem
  • auto Auto (margins only)

Examples

Here are some representative examples of these classes.

Horizontal Centering

There is also an .mx-auto class for horizontally centering elements. Note that it will only work on block level elements with a set width.

Horizontally centered