Padding & margins
Table of Contents
XXL-S paddings & margins
The basic letter value padding classes (Padding - XXL through Padding - S) are intended as section paddings, so they rely on the Side Padding variable to maintain consistent left & right padding. If uniform padding is desired, they can be combined with a Padding X class (Padding - XXL Padding X - XXL). Direction-specific padding & margin classes all rely on their namesake variable (Padding Top Tab - M &Margin Left Tab - M, for instance, both reference Spacing M Tab).
By default, these values are defined as responsive VW units on a 1/12th system, then converted to pixels at 1440 for max and 767 for mob. But the spacing system can be redefined to fit any project by updating the variables.
32px-4px paddings & margins
Pixel value padding & margins classes do not rely on variables because they function as they are named. The basic pixel value padding classes, i.e. Padding - 32px, are ideal for applications that require uniform padding, but can be combined with Padding X - Default to apply the Side Padding variable to left & right padding. The classes can modify an element across viewports by combining classes, i.e. Padding - 32px Padding Mob - 24px.
Tip: If additional pixel value spacing classes are needed for a project, it's important to define the new class across viewports according to inheritance rules. If a class like Padding Tab - 12px were created, for instance, this would need to be defined at both the tablet & mobile landscape viewports. Were it only defined at the tablet viewport, the element would revert to the broader class at mobile.
Auto margins
The Margin X - Auto class centers elements, & Margin Left - Auto & Margin Right - Auto offset elements to the right or the left, respectively. Margin Top - Auto & Margin Bottom - Auto function the same for vertical alignment, but require the parent to be set to display: flex;.