A suite of utility classes to apply margin and padding styles to elements. Use to add spacing within and/or between elements. These are generated using the
$spacing setting, which you should click here for more info on.
To prevent unintentioal margin collapse, best practice recommends declaring margins in a single direction, so only
mr (margin right) and
mb (margin bottom) variants are available, which each have spacing defined by the values in
Using the example classes below, you can apply
regular spacing as padding in the following ways:-
u-pt-regular- Padding top
u-pr-regular- Padding right
u-pb-regular- Padding bottom
u-pl-regular- Padding left
u-pv-regular- Vertical padding
u-ph-regular- Horizontal padding
u-p-regular- Padding in all directions
Spacing utilities can also be triggered at various breakpoints.
Adding this class to an element with a spacing utility means that if that element is also the last child element of its parent, the spacing won't be applied. This is almost exclusively used for programatically generated elements with margins, where the last element in the set needs to be margin free.