Abstände, Margins und Paddings

Es gibt folgende vordefinierte Abstände die für das Padding von Boxen oder vertikale Abstände benutzt werden können:

--spacing-xs: 0.3125rem; // 5px
--spacing-s: 0.625rem; // 10px
--spacing-m: 1.25rem; // 20px
--spacing-l: 2.5rem; // 40px
--spacing-xl: 5rem; // 80px

Mit diesen Klassen können die default-Abstände überschrieben werden:

.no-margin
.no-padding
.margin-bottom 
.margin-bottom-xs
.margin-bottom-s
.margin-bottom-m
.margin-bottom-l
.margin-bottom-xl
.margin-bottom-xl
.padding-xs
.padding-s
.padding-m
.padding-l
.padding-xl
.padding-xl