Spacing • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

A male lion with his mouth open

Photo by Hu Chen

Spacing

Introduction

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

1
2
3
4
5
6

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-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

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

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

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