Spacing

The Themalize spacing utilities include gaps designed to be used with the grids and flex utilities, and margin and padding utilities that can be used for spacing with any element as required. All are disabled by default, each can be enabled in the configuration.scss document as described below.

Utilities (anchor)

Gaps (anchor)

With $enable-gaps: true;

Gaps

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-4 {
  gap: 1.5rem;
}

.gap-5 {
  gap: 2rem;
}

.gap-c-0 {
  column-gap: 0;
}

.gap-c-1 {
  column-gap: 0.25rem;
}

.gap-c-2 {
  column-gap: 0.5rem;
}

.gap-c-3 {
  column-gap: 1rem;
}

.gap-c-4 {
  column-gap: 1.5rem;
}

.gap-c-5 {
  column-gap: 2rem;
}

.gap-r-0 {
  row-gap: 0;
}

.gap-r-1 {
  row-gap: 0.25rem;
}

.gap-r-2 {
  row-gap: 0.5rem;
}

.gap-r-3 {
  row-gap: 1rem;
}

.gap-r-4 {
  row-gap: 1.5rem;
}

.gap-r-5 {
  row-gap: 2rem;
}

Margins (anchor)

With $enable-margins: true;

Margins

.m-auto, .m-0, .m-1, .m-2, .m-3, .m-4, .m-5 {
  margin: var(--m);
}

.mt-auto, .mt-0, .mt-1, .mt-2, .mt-3, .mt-4, .mt-5 {
  margin-block-start: var(--mt);
}

.mb-auto, .mb-0, .mb-1, .mb-2, .mb-3, .mb-4, .mb-5 {
  margin-block-end: var(--mb);
}

.ms-auto, .ms-0, .ms-1, .ms-2, .ms-3, .ms-4, .ms-5 {
  margin-inline-start: var(--ms);
}

.me-auto, .me-0, .me-1, .me-2, .me-3, .me-4, .me-5 {
  margin-inline-end: var(--me);
}

.my-auto, .my-0, .my-1, .my-2, .my-3, .my-4, .my-5 {
  margin-block: var(--my);
}

.mx-auto, .mx-0, .mx-1, .mx-2, .mx-3, .mx-4, .mx-5 {
  margin-inline: var(--mx);
}

.m-auto {
  --m: auto;
}

.m-0 {
  --m: 0;
}

.m-1 {
  --m: 0.25rem;
}

.m-2 {
  --m: 0.5rem;
}

.m-3 {
  --m: 1rem;
}

.m-4 {
  --m: 1.5rem;
}

.m-5 {
  --m: 2rem;
}

.mt-auto {
  --mt: auto;
}

.mt-0 {
  --mt: 0;
}

.mt-1 {
  --mt: 0.25rem;
}

.mt-2 {
  --mt: 0.5rem;
}

.mt-3 {
  --mt: 1rem;
}

.mt-4 {
  --mt: 1.5rem;
}

.mt-5 {
  --mt: 2rem;
}

.mb-auto {
  --mb: auto;
}

.mb-0 {
  --mb: 0;
}

.mb-1 {
  --mb: 0.25rem;
}

.mb-2 {
  --mb: 0.5rem;
}

.mb-3 {
  --mb: 1rem;
}

.mb-4 {
  --mb: 1.5rem;
}

.mb-5 {
  --mb: 2rem;
}

.ms-auto {
  --ms: auto;
}

.ms-0 {
  --ms: 0;
}

.ms-1 {
  --ms: 0.25rem;
}

.ms-2 {
  --ms: 0.5rem;
}

.ms-3 {
  --ms: 1rem;
}

.ms-4 {
  --ms: 1.5rem;
}

.ms-5 {
  --ms: 2rem;
}

.me-auto {
  --me: auto;
}

.me-0 {
  --me: 0;
}

.me-1 {
  --me: 0.25rem;
}

.me-2 {
  --me: 0.5rem;
}

.me-3 {
  --me: 1rem;
}

.me-4 {
  --me: 1.5rem;
}

.me-5 {
  --me: 2rem;
}

.my-auto {
  --my: auto;
}

.my-0 {
  --my: 0;
}

.my-1 {
  --my: 0.25rem;
}

.my-2 {
  --my: 0.5rem;
}

.my-3 {
  --my: 1rem;
}

.my-4 {
  --my: 1.5rem;
}

.my-5 {
  --my: 2rem;
}

.mx-auto {
  --mx: auto;
}

.mx-0 {
  --mx: 0;
}

.mx-1 {
  --mx: 0.25rem;
}

.mx-2 {
  --mx: 0.5rem;
}

.mx-3 {
  --mx: 1rem;
}

.mx-4 {
  --mx: 1.5rem;
}

.mx-5 {
  --mx: 2rem;
}

Padding (anchor)

With $enable-padding: true;

Padding

.p-0, .p-1, .p-2, .p-3, .p-4, .p-5 {
  padding: var(--p);
}

.pt-0, .pt-1, .pt-2, .pt-3, .pt-4, .pt-5 {
  padding-block-start: var(--pt);
}

.pb-0, .pb-1, .pb-2, .pb-3, .pb-4, .pb-5 {
  padding-block-end: var(--pb);
}

.ps-0, .ps-1, .ps-2, .ps-3, .ps-4, .ps-5 {
  padding-inline-start: var(--ps);
}

.pe-0, .pe-1, .pe-2, .pe-3, .pe-4, .pe-5 {
  padding-inline-end: var(--pe);
}

.py-0, .py-1, .py-2, .py-3, .py-4, .py-5 {
  padding-block: var(--py);
}

.px-0, .px-1, .px-2, .px-3, .px-4, .px-5 {
  padding-inline: var(--px);
}

.p-0 {
  --p: 0;
}

.p-1 {
  --p: 0.25rem;
}

.p-2 {
  --p: 0.5rem;
}

.p-3 {
  --p: 1rem;
}

.p-4 {
  --p: 1.5rem;
}

.p-5 {
  --p: 2rem;
}

.pt-0 {
  --pt: 0;
}

.pt-1 {
  --pt: 0.25rem;
}

.pt-2 {
  --pt: 0.5rem;
}

.pt-3 {
  --pt: 1rem;
}

.pt-4 {
  --pt: 1.5rem;
}

.pt-5 {
  --pt: 2rem;
}

.pb-0 {
  --pb: 0;
}

.pb-1 {
  --pb: 0.25rem;
}

.pb-2 {
  --pb: 0.5rem;
}

.pb-3 {
  --pb: 1rem;
}

.pb-4 {
  --pb: 1.5rem;
}

.pb-5 {
  --pb: 2rem;
}

.ps-0 {
  --ps: 0;
}

.ps-1 {
  --ps: 0.25rem;
}

.ps-2 {
  --ps: 0.5rem;
}

.ps-3 {
  --ps: 1rem;
}

.ps-4 {
  --ps: 1.5rem;
}

.ps-5 {
  --ps: 2rem;
}

.pe-0 {
  --pe: 0;
}

.pe-1 {
  --pe: 0.25rem;
}

.pe-2 {
  --pe: 0.5rem;
}

.pe-3 {
  --pe: 1rem;
}

.pe-4 {
  --pe: 1.5rem;
}

.pe-5 {
  --pe: 2rem;
}

.py-0 {
  --py: 0;
}

.py-1 {
  --py: 0.25rem;
}

.py-2 {
  --py: 0.5rem;
}

.py-3 {
  --py: 1rem;
}

.py-4 {
  --py: 1.5rem;
}

.py-5 {
  --py: 2rem;
}

.px-0 {
  --px: 0;
}

.px-1 {
  --px: 0.25rem;
}

.px-2 {
  --px: 0.5rem;
}

.px-3 {
  --px: 1rem;
}

.px-4 {
  --px: 1.5rem;
}

.px-5 {
  --px: 2rem;
}

Responsive modifiers (anchor)

The responsive modifier classes for the gaps are compiled by default if the gaps are enabled. The single example below demonstrates the class names used for each gap modifier using the Themalize breakpoints.

.gap-1
.gap-1-xl
.gap-1-lg
.gap-1-md
.gap-1-sm
.gap-1-xs

The responsive modifiers for the margins and padding are optional, the examples below demonstrate the class names follow the same terminology as the gaps above which is repeated for all the other margin and padding utilities.

With $enable-margins-bp: true;

.mb-1
.mb-1-xl
.mb-1-lg
.mb-1-md
.mb-1-sm
.mb-1-xs

With $enable-padding-bp: true;

.pb-1
.pb-1-xl
.pb-1-lg
.pb-1-md
.pb-1-sm
.pb-1-xs