Spacings
Front includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
Notation
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is:
space- for class that setpadding-topandpadding-bottom
Where sides is:
space-top- for class that setpadding-topspace-bottom- for class that setpadding-bottom- blank - for classes that set a
paddingon top and bottom sides of the element
Where size is one of:
0- for classes that eliminate thepadding-topandpadding-bottomby setting it to01- (by default) for classes that set thepadding-topandpadding-bottomto$content-space * 22- (by default) for classes that set thepadding-topandpadding-bottomto$content-space * 43- (by default) for classes that set thepadding-topandpadding-bottomto$content-space * 84- (by default) for classes that set thepadding-topandpadding-bottomto$content-space * 12.55- (by default) for classes that set thepadding-topandpadding-bottomto$content-space * 15
(You can add more sizes by adding entries to the $content-space Sass map variable via: _theme-variables.scss.)