Spacing • Natura11y

There is a newer version of Naturally.

A male lion with his mouth open

Photo by Hu Chen



Natura11y provides spacing utilites for consistent margin and padding across elements.


Padding and Margin Utilites

Apply padding or margin to all sides of an element. Add .padding-{x} or .margin-{x}. Here x equals the spacer amount (values 1-6). In Figure 1, each box has a different padding utility.

Padding value 1 (all sides)


Padding value 2 (all sides)


Padding value 3 (all sides)


Padding value 4 (all sides)


Padding value 5 (all sides)


Padding value 6 (all sides)


        <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>
        <div class="padding-6">...</div>
Figure 1

In Figure 2, each box has a different margin utility.

Margin value (all sides)


Margin value (all sides)


Margin value (all sides)


Margin value (all sides)


Margin value (all sides)


Margin value (all sides)


        <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>
        <div class="margin-6">...</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 breakpoint modifiers -->
        <div class="padding-1 padding-4--lg 👈">...</div>
        <div class="margin-1 margin-4--lg" 👈">...</div>    
Figure 4