Utilities: Spacing
Utility CSS provides a bunch of helper utilities for margins and padding based on Garden spacing variables. Snippets below demonstrate utility stying.
Margins
Extra Extra-Small
.u-m-xxs
.u-mt-xxs
.u-mr-xxs
.u-mb-xxs
.u-ml-xxs
.u-mh-xxs
.u-mv-xxs
Extra Extra-Small (Negative)
.u-m-xxs-
.u-mt-xxs-
.u-mr-xxs-
.u-mb-xxs-
.u-ml-xxs-
.u-mh-xxs-
.u-mv-xxs-
Extra-Small
.u-m-xs
.u-mt-xs
.u-mr-xs
.u-mb-xs
.u-ml-xs
.u-mh-xs
.u-mv-xs
Extra-Small (Negative)
.u-m-xs-
.u-mt-xs-
.u-mr-xs-
.u-mb-xs-
.u-ml-xs-
.u-mh-xs-
.u-mv-xs-
Small
.u-m-sm
.u-mt-sm
.u-mr-sm
.u-mb-sm
.u-ml-sm
.u-mh-sm
.u-mv-sm
Small (Negative)
.u-m-sm-
.u-mt-sm-
.u-mr-sm-
.u-mb-sm-
.u-ml-sm-
.u-mh-sm-
.u-mv-sm-
Medium
.u-m
.u-mt
.u-mr
.u-mb
.u-ml
.u-mh
.u-mv
Medium (Negative)
.u-m-
.u-mt-
.u-mr-
.u-mb-
.u-ml-
.u-mh-
.u-mv-
Large
.u-m-lg
.u-mt-lg
.u-mr-lg
.u-mb-lg
.u-ml-lg
.u-mh-lg
.u-mv-lg
Large (Negative)
.u-m-lg-
.u-mt-lg-
.u-mr-lg-
.u-mb-lg-
.u-ml-lg-
.u-mh-lg-
.u-mv-lg-
Extra-Large
.u-m-xl
.u-mt-xl
.u-mr-xl
.u-mb-xl
.u-ml-xl
.u-mh-xl
.u-mv-xl
Extra-Large (Negative)
.u-m-xl-
.u-mt-xl-
.u-mr-xl-
.u-mb-xl-
.u-ml-xl-
.u-mh-xl-
.u-mv-xl-
Extra Extra-Large
.u-m-xxl
.u-mt-xxl
.u-mr-xxl
.u-mb-xxl
.u-ml-xxl
.u-mh-xxl
.u-mv-xxl
Extra Extra-Large (Negative)
.u-m-xxl-
.u-mt-xxl-
.u-mr-xxl-
.u-mb-xxl-
.u-ml-xxl-
.u-mh-xxl-
.u-mv-xxl-
Padding
Extra Extra-Small
.u-p-xxs
.u-pt-xxs
.u-pr-xxs
.u-pb-xxs
.u-pl-xxs
.u-ph-xxs
.u-pv-xxs
Extra-Small
.u-p-xs
.u-pt-xs
.u-pr-xs
.u-pb-xs
.u-pl-xs
.u-ph-xs
.u-pv-xs
Small
.u-p-sm
.u-pt-sm
.u-pr-sm
.u-pb-sm
.u-pl-sm
.u-ph-sm
.u-pv-sm
Medium
.u-p
.u-pt
.u-pr
.u-pb
.u-pl
.u-ph
.u-pv
Large
.u-p-lg
.u-pt-lg
.u-pr-lg
.u-pb-lg
.u-pl-lg
.u-ph-lg
.u-pv-lg
Extra-Large
.u-p-xl
.u-pt-xl
.u-pr-xl
.u-pb-xl
.u-pl-xl
.u-ph-xl
.u-pv-xl
Extra Extra-Large
.u-p-xxl
.u-pt-xxl
.u-pr-xxl
.u-pb-xxl
.u-pl-xxl
.u-ph-xxl
.u-pv-xxl