Vertical spacing, to a reasonable degree on granularity, uses preset classes. The boxes below are styled with padding bottom and margin bottom, but padding top and margin top also exist (ex spacing spacing--is-pt-xsmall and spacing spacing--is-mt-large ).
Values increase by double for desktop devices.
spacing The spacer scss function, which drives the spacing classes, takes any number as a modifier (in rem), and simply multiplies it by a base value.
$base: 1.2
"xxsmall": fn.spacer(0.25)
"xsmall": fn.spacer(0.5)
"small": fn.spacer(1)
"medium": fn.spacer(1.5)
"large": fn.spacer(2)
"xlarge": fn.spacer(2.5)
"xxlarge": fn.spacer(3)
"xxxlarge": fn.spacer(4)
These values are mobile-first. Once the desktop breakpoint is reached, the values are doubled.
The Customizing Doxa for help creating custom spacing classes and breakpoints.