Introduction
1
2
3
4
5
6
Padding and Margin Utilites
Apply padding or margin to all sides of an element. Add .padding-{x}
or .margin-{x}
. Here x equals the spacer amount (values 1-6). In Figure 1, each box has a different padding utility.
In Figure 2, each box has a different margin utility.
Direction Specific
Apply padding or margin to a specific side, top and bottom, or left and right. Figure 3 below provides these directional utilities using spacer value of 2.
Breakpoint Modifiers
Padding and margin utilities accept breakpoint modifiers.