Spacing
Adds or overrides margin and padding.
Margin
.m-[1–10] |
.5rem × [1–10] margin on all sides |
.m-t-[1–10] |
.5rem × [1–10] margin on top |
.m-r-[1–10] |
.5rem × [1–10] margin on right |
.m-b-[1–10] |
.5rem × [1–10] margin on bottom |
.m-l-[1–10] |
.5rem × [1–10] margin on left |
.m-tb-[1–10] |
.5rem × [1–10] margin on top and bottom |
.m-lr-[1–10] |
.5rem × [1–10] margin on left and right |
.m-lr-auto |
auto margin on left and right |
.m-neg-[1–10] |
.5rem × [1–10] negative margin on all sides |
.m-t-neg-[1–10] |
.5rem × [1–10] negative margin on top |
.m-r-neg-[1–10] |
.5rem × [1–10] negative margin on right |
.m-b-neg-[1–10] |
.5rem × [1–10] negative margin on bottom |
.m-l-neg-[1–10] |
.5rem × [1–10] negative margin on left |
.m-tb-neg-[1–10] |
.5rem × [1–10] negative margin on top and bottom |
.m-lr-neg-[1–10] |
.5rem × [1–10] negative margin on left and right |
Responsive Margin
All margin utilities listed above are also available as responsive utilities:
.only-s:m-[*]-[1–10] |
.m-[*]-[1–10] only at breakpoint s |
.m:m-[*]-[1–10] |
.m-[*]-[1–10] at breakpoint m and larger |
.only-m:m-[*]-[1–10] |
.m-[*]-[1–10] only at breakpoint m |
.l:m-[*]-[1–10] |
.m-[*]-[1–10] at breakpoint l and larger |
.only-l:m-[*]-[1–10] |
.m-[*]-[1–10] only at breakpoint l |
.xl:m-[*]-[1–10] |
.m-[*]-[1–10] at breakpoint xl |
Padding
.p-[1–10] |
.5rem × [1–10] padding on all sides |
.p-t-[1–10] |
.5rem × [1–10] padding on top |
.p-r-[1–10] |
.5rem × [1–10] padding on right |
.p-b-[1–10] |
.5rem × [1–10] padding on bottom |
.p-l-[1–10] |
.5rem × [1–10] padding on left |
.p-tb-[1–10] |
.5rem × [1–10] padding on top and bottom |
.p-lr-[1–10] |
.5rem × [1–10] padding on left and right |
Responsive Padding
All padding utilities listed above are also available as responsive utilities:
.only-s:p-[*]-[1–10] |
.p-[*]-[1–10] only at breakpoint s |
.m:p-[*]-[1–10] |
.p-[*]-[1–10] at breakpoint m and larger |
.only-m:p-[*]-[1–10] |
.p-[*]-[1–10] only at breakpoint m |
.l:p-[*]-[1–10] |
.p-[*]-[1–10] at breakpoint l and larger |
.only-l:p-[*]-[1–10] |
.p-[*]-[1–10] only at breakpoint l |
.xl:p-[*]-[1–10] |
.p-[*]-[1–10] at breakpoint xl |
Source Files
spacing-base.less
,
spacing-responsive.less