Spacing • Natura11y
Jump to main contentJump to website footer
A male lion with his mouth open

Photo by Hu Chen

Spacing

Introduction

Natura11y provides tools for consistent margin, padding, and gap spacing across elements. These utilities ensure uniformity throughout your design.

Spacing Values

Spacing values range from 1 to 6, with 1 being the smallest and 6 the largest. These values follow the eight-point grid system for consistent spacing.

Local VariableValueVisual Size
spacer-1
8
spacer-2
16
spacer-3
24
spacer-4
40
spacer-5
64
spacer-6
104

Understanding the Scale

The spacing values in Natura11y are based on a base unit of 1rem (typically 16px). Each subsequent value is a multiple of this base unit, but the increase is not linear. Instead, the values grow more significantly as they get larger. Specifically, each value is the sum of the previous two values. For example, 8 + 8 = 16, 16 + 8 = 24, and so on.

This scaling system allows you to apply spacing that increases more quickly with larger values, providing flexibility in how much space you can create between elements.

Padding and Margin Utilities

You can apply padding or margin to all sides of an element using the .padding-{x} or .margin-{x} classes, where x equals the spacer amount (from 1 to 6). Figure 1 demonstrates different padding utilities applied to boxes.

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

Figure 2 shows different margin utilities applied to boxes.

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

Direction-Specific Utilities

You can apply padding or margin to a specific side, top and bottom, or left and right of an element. Figure 3 provides examples of these directional utilities with a 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

Natura11y's padding and margin utilities also support breakpoint modifiers for responsive designs.


        <!-- With breakpoint modifiers -->
        
        <div class="padding-1 padding-4--lg">...</div>
        <div class="margin-1 margin-4--lg">...</div>
Figure 4

Gap Utilities

Apply the .gap-{x} utility class to grid and flex selectors. Here x equals the gap value. Gap value include spacer values and the global border width (e.g., .gap-border).

The .grid selector with .gap-2 applied:

01

02

03

04

05

06

        
        <div class="grid gap-2">
            ...
        </div>
        
        <!-- All gap utilities: -->
        
        <div class="grid gap-border">...</div>
        <div class="grid gap-1">...</div>
        <div class="grid gap-2">...</div>
        <div class="grid gap-3">...</div>
        <div class="grid gap-4">...</div>
        <div class="grid gap-5">...</div>
        <div class="grid gap-6">...</div>
Figure 11