Skip Navigation

Photo by Lemuel Butler  on Unsplash

Spacing

Natura11y provides six spacers used to generate the padding and margin utilites.

1
2
3
4
5
6

Padding and Margin Utilites

Apply the padding and margin utilites (.padding-{x} and .margin-{x}) to any selector. Here x equals the spacer amount (values 1-5). In Figure 1, each box has a different padding value applied.

Padding value 1 (all sides)

.padding-1

Padding value 2 (all sides)

.padding-2

Padding value 3 (all sides)

.padding-3

Padding value 4 (all sides)

.padding-4

Padding value 5 (all sides)

.padding-5

Padding value 6 (all sides)

.padding-6

<div class="padding-1">...</div>
<div class="padding-2">...</div>
<div class="padding-3">...</div>
<div class="padding-4">...</div>
<div class="padding-5">...</div>
Figure 1

In Figure 2, each box has a different margin value applied.

Margin value (all sides)

.margin-1

Margin value (all sides)

.margin-2

Margin value (all sides)

.margin-3

Margin value (all sides)

.margin-4

Margin value (all sides)

.margin-5

Margin value (all sides)

.margin-6

<div class="margin-1">...</div>
<div class="margin-2">...</div>
<div class="margin-3">...</div>
<div class="margin-4">...</div>
<div class="margin-5">...</div>
Figure 2

Direction Specific

Apply padding or margin to a specific side, top and bottom, or left and right. Figure 3 below provides these directional utilities using spacer value of 2.

<!-- Single side only (top, right, bottom, left) -->

<div class="padding-top-2">...</div>
<div class="padding-right-2">...</div>
<div class="padding-bottom-2">...</div>
<div class="padding-left-2">...</div>

<div class="margin-top-2">...</div>
<div class="margin-right-2">...</div>
<div class="margin-bottom-2">...</div>
<div class="margin-left-2">...</div>

<!-- Top and bottom only -->
<div class="padding-y-2">...</div>
<div class="margin-y-2">...</div>

<!-- Left and right only -->
<div class="padding-x-2">...</div>
<div class="margin-x-2">...</div>

<!-- Centering with margin -->
<div class="margin-x-auto">...</div>
Figure 3

Breakpoint Modifiers

Padding and margin utilities accept breakpoint modifiers.

With the HTML in Figure 4, the container starts with a padding value of 1. It then changes to a padding value of 5 at the large breakpoint.

<!-- With breakpoint modifiers -->

<div class="padding-1 padding-5--lg">...</div>
<div class="margin-1 margin-5--lg">...</div>
Figure 4

Related CSS Variables

Further customize Spacing by redefining any of their related CSS variables as shown below.

:root {
    --spacer-base: 1rem;
    --spacer-1: calc(var(--spacer-base) * 0.5);
    --spacer-2: calc(var(--spacer-base) * 1);
    --spacer-3: calc(var(--spacer-base) * 1.5);
    --spacer-4: calc(var(--spacer-base) * 2.5);
    --spacer-5: calc(var(--spacer-base) * 4);
    --spacer-6: calc(var(--spacer-base) * 6.5);
}