Margin + Padding
Adjust the margin and padding of an element
Margin
Margin utilities add space outside an element's border.
Margin
| Utility class | Value | Example |
|---|---|---|
| .margin-0 | 0 |
|
| .margin-1px | 1px |
|
| .margin-2px | 2px |
|
| .margin-05 | 4px |
|
| .margin-1 | 8px |
|
| .margin-105 | 12px |
|
| .margin-2 | 16px |
|
| .margin-205 | 20px |
|
| .margin-3 | 24px |
|
| .margin-4 | 32px |
|
| .margin-5 | 40px |
|
| .margin-6 | 48px |
|
| .margin-7 | 56px |
|
| .margin-8 | 64px |
|
| .margin-9 | 72px |
|
| .margin-10 | 80px |
|
| .margin-15 | 120px |
|
Margin-top
Margin-top
| Utility class | Value | Example |
|---|---|---|
| .margin-top-0 | 0 |
|
| .margin-top-1px | 1px |
|
| .margin-top-2px | 2px |
|
| .margin-top-05 | 4px |
|
| .margin-top-1 | 8px |
|
| .margin-top-105 | 12px |
|
| .margin-top-2 | 16px |
|
| .margin-top-205 | 20px |
|
| .margin-top-3 | 24px |
|
| .margin-top-4 | 32px |
|
| .margin-top-5 | 40px |
|
| .margin-top-6 | 48px |
|
| .margin-top-7 | 56px |
|
| .margin-top-8 | 64px |
|
| .margin-top-9 | 72px |
|
| .margin-top-10 | 80px |
|
| .margin-top-15 | 120px |
|
Margin-top (negative)
The center box (marked with a dot) is fixed. Negative margins pull the outer boxes toward it. The shaded region shows the distance the outer box moved.
| Utility class | Value | Example |
|---|---|---|
| .margin-top-neg-1px | -1px |
|
| .margin-top-neg-2px | -2px |
|
| .margin-top-neg-05 | -4px |
|
| .margin-top-neg-1 | -8px |
|
| .margin-top-neg-105 | -12px |
|
| .margin-top-neg-2 | -16px |
|
| .margin-top-neg-205 | -20px |
|
| .margin-top-neg-3 | -24px |
|
| .margin-top-neg-4 | -32px |
|
| .margin-top-neg-5 | -40px |
|
| .margin-top-neg-6 | -48px |
|
| .margin-top-neg-7 | -56px |
|
| .margin-top-neg-8 | -64px |
|
| .margin-top-neg-9 | -72px |
|
| .margin-top-neg-10 | -80px |
|
| .margin-top-neg-15 | -120px |
|
Margin-right
Margin-right
| Utility class | Value | Example |
|---|---|---|
| .margin-right-0 | 0 |
|
| .margin-right-1px | 1px |
|
| .margin-right-2px | 2px |
|
| .margin-right-05 | 4px |
|
| .margin-right-1 | 8px |
|
| .margin-right-105 | 12px |
|
| .margin-right-2 | 16px |
|
| .margin-right-205 | 20px |
|
| .margin-right-3 | 24px |
|
| .margin-right-4 | 32px |
|
| .margin-right-5 | 40px |
|
| .margin-right-6 | 48px |
|
| .margin-right-7 | 56px |
|
| .margin-right-8 | 64px |
|
| .margin-right-9 | 72px |
|
| .margin-right-10 | 80px |
|
| .margin-right-15 | 120px |
|
| .margin-right-auto | auto |
|
Margin-right (negative)
The center box (marked with a dot) is fixed. Negative margins pull the outer boxes toward it. The shaded region shows the distance the outer box moved.
| Utility class | Value | Example |
|---|---|---|
| .margin-right-neg-1px | -1px |
|
| .margin-right-neg-2px | -2px |
|
| .margin-right-neg-05 | -4px |
|
| .margin-right-neg-1 | -8px |
|
| .margin-right-neg-105 | -12px |
|
| .margin-right-neg-2 | -16px |
|
| .margin-right-neg-205 | -20px |
|
| .margin-right-neg-3 | -24px |
|
| .margin-right-neg-4 | -32px |
|
| .margin-right-neg-5 | -40px |
|
| .margin-right-neg-6 | -48px |
|
| .margin-right-neg-7 | -56px |
|
| .margin-right-neg-8 | -64px |
|
| .margin-right-neg-9 | -72px |
|
| .margin-right-neg-10 | -80px |
|
| .margin-right-neg-15 | -120px |
|
Margin-bottom
Margin-bottom
| Utility class | Value | Example |
|---|---|---|
| .margin-bottom-0 | 0 |
|
| .margin-bottom-1px | 1px |
|
| .margin-bottom-2px | 2px |
|
| .margin-bottom-05 | 4px |
|
| .margin-bottom-1 | 8px |
|
| .margin-bottom-105 | 12px |
|
| .margin-bottom-2 | 16px |
|
| .margin-bottom-205 | 20px |
|
| .margin-bottom-3 | 24px |
|
| .margin-bottom-4 | 32px |
|
| .margin-bottom-5 | 40px |
|
| .margin-bottom-6 | 48px |
|
| .margin-bottom-7 | 56px |
|
| .margin-bottom-8 | 64px |
|
| .margin-bottom-9 | 72px |
|
| .margin-bottom-10 | 80px |
|
| .margin-bottom-15 | 120px |
|
Margin-bottom (negative)
The center box (marked with a dot) is fixed. Negative margins pull the outer boxes toward it. The shaded region shows the distance the outer boxes moved.
| Utility class | Value | Example |
|---|---|---|
| .margin-bottom-neg-1px | -1px |
|
| .margin-bottom-neg-2px | -2px |
|
| .margin-bottom-neg-05 | -4px |
|
| .margin-bottom-neg-1 | -8px |
|
| .margin-bottom-neg-105 | -12px |
|
| .margin-bottom-neg-2 | -16px |
|
| .margin-bottom-neg-205 | -20px |
|
| .margin-bottom-neg-3 | -24px |
|
| .margin-bottom-neg-4 | -32px |
|
| .margin-bottom-neg-5 | -40px |
|
| .margin-bottom-neg-6 | -48px |
|
| .margin-bottom-neg-7 | -56px |
|
| .margin-bottom-neg-8 | -64px |
|
| .margin-bottom-neg-9 | -72px |
|
| .margin-bottom-neg-10 | -80px |
|
| .margin-bottom-neg-15 | -120px |
|
Margin-left
Margin-left
| Utility class | Value | Example |
|---|---|---|
| .margin-left-0 | 0 |
|
| .margin-left-1px | 1px |
|
| .margin-left-2px | 2px |
|
| .margin-left-05 | 4px |
|
| .margin-left-1 | 8px |
|
| .margin-left-105 | 12px |
|
| .margin-left-2 | 16px |
|
| .margin-left-205 | 20px |
|
| .margin-left-3 | 24px |
|
| .margin-left-4 | 32px |
|
| .margin-left-5 | 40px |
|
| .margin-left-6 | 48px |
|
| .margin-left-7 | 56px |
|
| .margin-left-8 | 64px |
|
| .margin-left-9 | 72px |
|
| .margin-left-10 | 80px |
|
| .margin-left-15 | 120px |
|
| .margin-left-auto | auto |
|
Margin-left (negative)
The center box (marked with a dot) is fixed. Negative margins pull the outer boxes toward it. The shaded region shows the distance the outer boxes moved.
| Utility class | Value | Example |
|---|---|---|
| .margin-left-neg-1px | -1px |
|
| .margin-left-neg-2px | -2px |
|
| .margin-left-neg-05 | -4px |
|
| .margin-left-neg-1 | -8px |
|
| .margin-left-neg-105 | -12px |
|
| .margin-left-neg-2 | -16px |
|
| .margin-left-neg-205 | -20px |
|
| .margin-left-neg-3 | -24px |
|
| .margin-left-neg-4 | -32px |
|
| .margin-left-neg-5 | -40px |
|
| .margin-left-neg-6 | -48px |
|
| .margin-left-neg-7 | -56px |
|
| .margin-left-neg-8 | -64px |
|
| .margin-left-neg-9 | -72px |
|
| .margin-left-neg-10 | -80px |
|
| .margin-left-neg-15 | -120px |
|
Margin-y
Margin-y
| Utility class | Value | Example |
|---|---|---|
| .margin-y-0 | 0 |
|
| .margin-y-1px | 1px |
|
| .margin-y-2px | 2px |
|
| .margin-y-05 | 4px |
|
| .margin-y-1 | 8px |
|
| .margin-y-105 | 12px |
|
| .margin-y-2 | 16px |
|
| .margin-y-205 | 20px |
|
| .margin-y-3 | 24px |
|
| .margin-y-4 | 32px |
|
| .margin-y-5 | 40px |
|
| .margin-y-6 | 48px |
|
| .margin-y-7 | 56px |
|
| .margin-y-8 | 64px |
|
| .margin-y-9 | 72px |
|
| .margin-y-10 | 80px |
|
| .margin-y-15 | 120px |
|
Margin-y (negative)
The center box (marked with a dot) is fixed. Negative margins pull the outer boxes toward it. The shaded regions show the distance the outer boxes moved.
| Utility class | Value | Example |
|---|---|---|
| .margin-y-neg-1px | -1px |
|
| .margin-y-neg-2px | -2px |
|
| .margin-y-neg-05 | -4px |
|
| .margin-y-neg-1 | -8px |
|
| .margin-y-neg-105 | -12px |
|
| .margin-y-neg-2 | -16px |
|
| .margin-y-neg-205 | -20px |
|
| .margin-y-neg-3 | -24px |
|
| .margin-y-neg-4 | -32px |
|
| .margin-y-neg-5 | -40px |
|
| .margin-y-neg-6 | -48px |
|
| .margin-y-neg-7 | -56px |
|
| .margin-y-neg-8 | -64px |
|
| .margin-y-neg-9 | -72px |
|
| .margin-y-neg-10 | -80px |
|
| .margin-y-neg-15 | -120px |
|
Margin-x
Margin-x
| Utility class | Value | Example |
|---|---|---|
| .margin-x-0 | 0 |
|
| .margin-x-1px | 1px |
|
| .margin-x-2px | 2px |
|
| .margin-x-05 | 4px |
|
| .margin-x-1 | 8px |
|
| .margin-x-105 | 12px |
|
| .margin-x-2 | 16px |
|
| .margin-x-205 | 20px |
|
| .margin-x-3 | 24px |
|
| .margin-x-4 | 32px |
|
| .margin-x-5 | 40px |
|
| .margin-x-6 | 48px |
|
| .margin-x-7 | 56px |
|
| .margin-x-8 | 64px |
|
| .margin-x-9 | 72px |
|
| .margin-x-10 | 80px |
|
| .margin-x-15 | 120px |
|
| .margin-x-auto | auto |
|
Margin-x (negative)
The center box (marked with a dot) is fixed. Negative margins pull both outer boxes toward it. The shaded regions show the distance each outer box moved.
| Utility class | Value | Example |
|---|---|---|
| .margin-x-neg-1px | -1px |
|
| .margin-x-neg-2px | -2px |
|
| .margin-x-neg-05 | -4px |
|
| .margin-x-neg-1 | -8px |
|
| .margin-x-neg-105 | -12px |
|
| .margin-x-neg-2 | -16px |
|
| .margin-x-neg-205 | -20px |
|
| .margin-x-neg-3 | -24px |
|
| .margin-x-neg-4 | -32px |
|
| .margin-x-neg-5 | -40px |
|
| .margin-x-neg-6 | -48px |
|
| .margin-x-neg-7 | -56px |
|
| .margin-x-neg-8 | -64px |
|
| .margin-x-neg-9 | -72px |
|
| .margin-x-neg-10 | -80px |
|
| .margin-x-neg-15 | -120px |
|
Padding
Padding utilities add space inside an element's border.
Padding
| Utility class | Value | Example |
|---|---|---|
| .padding-0 | 0 |
|
| .padding-1px | 1px |
|
| .padding-2px | 2px |
|
| .padding-05 | 4px |
|
| .padding-1 | 8px |
|
| .padding-105 | 12px |
|
| .padding-2 | 16px |
|
| .padding-205 | 20px |
|
| .padding-3 | 24px |
|
| .padding-4 | 32px |
|
| .padding-5 | 40px |
|
| .padding-6 | 48px |
|
| .padding-7 | 56px |
|
| .padding-8 | 64px |
|
| .padding-9 | 72px |
|
| .padding-10 | 80px |
|
| .padding-15 | 120px |
|
Padding-top
| Utility class | Value | Example |
|---|---|---|
| .padding-top-0 | 0 |
|
| .padding-top-1px | 1px |
|
| .padding-top-2px | 2px |
|
| .padding-top-05 | 4px |
|
| .padding-top-1 | 8px |
|
| .padding-top-105 | 12px |
|
| .padding-top-2 | 16px |
|
| .padding-top-205 | 20px |
|
| .padding-top-3 | 24px |
|
| .padding-top-4 | 32px |
|
| .padding-top-5 | 40px |
|
| .padding-top-6 | 48px |
|
| .padding-top-7 | 56px |
|
| .padding-top-8 | 64px |
|
| .padding-top-9 | 72px |
|
| .padding-top-10 | 80px |
|
| .padding-top-15 | 120px |
|
Padding-right
| Utility class | Value | Example |
|---|---|---|
| .padding-right-0 | 0 |
|
| .padding-right-1px | 1px |
|
| .padding-right-2px | 2px |
|
| .padding-right-05 | 4px |
|
| .padding-right-1 | 8px |
|
| .padding-right-105 | 12px |
|
| .padding-right-2 | 16px |
|
| .padding-right-205 | 20px |
|
| .padding-right-3 | 24px |
|
| .padding-right-4 | 32px |
|
| .padding-right-5 | 40px |
|
| .padding-right-6 | 48px |
|
| .padding-right-7 | 56px |
|
| .padding-right-8 | 64px |
|
| .padding-right-9 | 72px |
|
| .padding-right-10 | 80px |
|
| .padding-right-15 | 120px |
|
Padding-bottom
| Utility class | Value | Example |
|---|---|---|
| .padding-bottom-0 | 0 |
|
| .padding-bottom-1px | 1px |
|
| .padding-bottom-2px | 2px |
|
| .padding-bottom-05 | 4px |
|
| .padding-bottom-1 | 8px |
|
| .padding-bottom-105 | 12px |
|
| .padding-bottom-2 | 16px |
|
| .padding-bottom-205 | 20px |
|
| .padding-bottom-3 | 24px |
|
| .padding-bottom-4 | 32px |
|
| .padding-bottom-5 | 40px |
|
| .padding-bottom-6 | 48px |
|
| .padding-bottom-7 | 56px |
|
| .padding-bottom-8 | 64px |
|
| .padding-bottom-9 | 72px |
|
| .padding-bottom-10 | 80px |
|
| .padding-bottom-15 | 120px |
|
Padding-left
| Utility class | Value | Example |
|---|---|---|
| .padding-left-0 | 0 |
|
| .padding-left-1px | 1px |
|
| .padding-left-2px | 2px |
|
| .padding-left-05 | 4px |
|
| .padding-left-1 | 8px |
|
| .padding-left-105 | 12px |
|
| .padding-left-2 | 16px |
|
| .padding-left-205 | 20px |
|
| .padding-left-3 | 24px |
|
| .padding-left-4 | 32px |
|
| .padding-left-5 | 40px |
|
| .padding-left-6 | 48px |
|
| .padding-left-7 | 56px |
|
| .padding-left-8 | 64px |
|
| .padding-left-9 | 72px |
|
| .padding-left-10 | 80px |
|
| .padding-left-15 | 120px |
|
Padding-y
| Utility class | Value | Example |
|---|---|---|
| .padding-y-0 | 0 |
|
| .padding-y-1px | 1px |
|
| .padding-y-2px | 2px |
|
| .padding-y-05 | 4px |
|
| .padding-y-1 | 8px |
|
| .padding-y-105 | 12px |
|
| .padding-y-2 | 16px |
|
| .padding-y-205 | 20px |
|
| .padding-y-3 | 24px |
|
| .padding-y-4 | 32px |
|
| .padding-y-5 | 40px |
|
| .padding-y-6 | 48px |
|
| .padding-y-7 | 56px |
|
| .padding-y-8 | 64px |
|
| .padding-y-9 | 72px |
|
| .padding-y-10 | 80px |
|
| .padding-y-15 | 120px |
|
Padding-x
| Utility class | Value | Example |
|---|---|---|
| .padding-x-0 | 0 |
|
| .padding-x-1px | 1px |
|
| .padding-x-2px | 2px |
|
| .padding-x-05 | 4px |
|
| .padding-x-1 | 8px |
|
| .padding-x-105 | 12px |
|
| .padding-x-2 | 16px |
|
| .padding-x-205 | 20px |
|
| .padding-x-3 | 24px |
|
| .padding-x-4 | 32px |
|
| .padding-x-5 | 40px |
|
| .padding-x-6 | 48px |
|
| .padding-x-7 | 56px |
|
| .padding-x-8 | 64px |
|
| .padding-x-9 | 72px |
|
| .padding-x-10 | 80px |
|
| .padding-x-15 | 120px |
|
Utility classes
| Utility | Example | Code |
|---|---|---|
| .margin-value | .margin-2 | class="margin-2" |
| .margin-x-value | .margin-x-auto | class="margin-x-auto" |
| .margin-y-value | .margin-y-3 | class="margin-y-3" |
| .margin-top-value | .margin-top-1 | class="margin-top-1" |
| .margin-bottom-value | .margin-bottom-4 | class="margin-bottom-4" |
| .margin-left-value | .margin-left-auto | class="margin-left-auto" |
| .margin-right-value | .margin-right-2 | class="margin-right-2" |
| .margin-side-neg-value | .margin-top-neg-3 | class="margin-top-neg-3" |
| .padding-value | .padding-2 | class="padding-2" |
| .padding-x-value | .padding-x-4 | class="padding-x-4" |
| .padding-y-value | .padding-y-2 | class="padding-y-2" |
| .padding-top-value | .padding-top-3 | class="padding-top-3" |
| .padding-bottom-value | .padding-bottom-1 | class="padding-bottom-1" |
| .padding-left-value | .padding-left-2 | class="padding-left-2" |
| .padding-right-value | .padding-right-05 | class="padding-right-05" |
- Use single-quoted strings in Utility classes.
- Do not quote numbers or px values. With the exception of half (
05), values like'105', and'205'should be treated as strings. - String tokens for half values (like
05) and negative values (likeneg-1) may also be written with their unquoted number token equivalent:0.5,1.5,2.5,-1,-1.5, etc. - If multiple utilities share the same prefix (ex:
.text-or.flex-) or a single utility accepts multiple kinds of values (ex:.borderaccepts both border weight and border color), their shared mixin can accept multiple comma-separated values:u-text('primary-darkest', 'no-underline', 'bold')u-border-top(2px, 'accent-warm')
- Output any utility mixin as
!importantby appending!importantto the mixin’s argument list: u-bg('red-warm-50v', !important)
Utility variants
More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.
Responsive variants
You can apply different styles at differentresponsive breakpoints using responsive utilities.
Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).
| Utility variable | Responsive |
|---|---|
| $margin-settings | true |
| $padding-settings | true |
State variants
You can apply different styles for different state variants using state utilities.
Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).
| Utility variable | Active | Focus | Hover | Visited |
|---|---|---|---|---|
| $margin-settings | false | false | false | false |
| $padding-settings | false | false | false | false |
