Padding utilities are based on a global spacing scale which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
Since padding utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
horizontal, left & right
vertical, top & bottom
Note: The blue in the examples below represents the element, and the green represents the padding.
Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6.
Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6.