Spacing

Notation #

The notation of padding or margin consists of several parts:

{name}{side}-{size}

Where {name} is one of:

• m — for classes that set margin;
• p — for classes that set padding.

Where {side} is one of:

• t — sets margin-top or padding-top;
• b — sets margin-bottom or padding-bottom;
• l — sets margin-left or padding-left;
• r — sets margin-right or padding-right;
• x — sets both left and right margin or padding;
• y — sets both top and bottom margin or padding;
• blank — sets a margin or padding on all sides of the element.

Where {size} is one of:

• size — sets a specified size of margin or padding;
• off — turns off margin or padding of the element;
• auto — sets the margin to auto.

The {size} is based on the Spacing scale. By default, it looks like this:

// =Scales
$scales: (
    spacing: (
        1: 1, // {size name}: {size in rem}
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        12: 12,
        14: 14,
        16: 16,
        20: 20,
        24: 24,
        32: 32
    )
);

Here are some examples of how to specify spacing classes:

<div class="m-4">..</div>
<div class="mb-4">..</div>
<div class="pt-6">..</div>
<div class="px-8">..</div>
<div class="p-off">..</div>
<div class="mt-off">..</div>
<div class="ml-auto">..</div>

And here is an example of a card where you can see how spacing classes work in real life.

<div class="card b-dark-10 bg-light r-base">
    <div class="card-box p-6 pb-10">
        <div class="card-caption mb-2">
            <a href="#" class="caption caption-positive">...</a>
        </div>
        <div class="card-head">
            <h2 class="heading-medium">...</h2>
        </div>
        <div class="card-body mt-3">
            <p class="text-medium">...</p>
        </div>
    </div>
</div>

Negative #

To specify negative margins you need to add the prefix n before the size.

<div class="mb-n4">...</div>
<div class="mt-n4">...</div>
<div class="ml-n4">...</div>
<div class="mr-n4">...</div>

Responsive #

Use m-off-sm or p-off-sm classes to turn off margin or padding of the element on mobile screens.

<div class="mb-4 m-off-sm">...</div>
<div class="p-4 p-off-sm">...</div>

Use the -sm suffix for any spacing class to change the spacing behavior on small screens.

<div class="p-4 p-2-sm">...</div>
<div class="mb-4 mb-6-sm">...</div>
<div class="mt-auto mt-off-sm">...</div>