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
- s Start
- e End
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)
s(start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e(end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
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.