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 in spacing is based on the $spacing-scale map specified in vars/scales. See more about how spacing scales are formed. By default, it looks like this:

$spacing-scale: (
    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,
    25: 25,
    30: 30
);

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>

Negative #

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

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

Behavior on small screens #

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>

The -sm suffix can be added for any spacing class.

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