Spacing

Margin and padding

Where property is one of :

  • m - for classes that set margin
  • p - for classes that set padding

Control the property on one side of an element using the m{t|r|b|l}-{size} utilities.

Control the vertical | horizontal property of an element using the m{y|x}-{size} utilities.

Control the property responsively using breakpoint prefix {sm|md|lg|xl|ultra}:m-{size}

For example, mt-12 would add 3rem of margin to the top of an element. lg:px-4 would add horizontal padding only when screen width > 992px

Size Value
0 0px;
0.5 0.125rem; /* 2px */
1 0.25rem; /* 4px */
1.5 0.375rem; /* 6px */
2 0.5rem; /* 8px */
2.5 0.625rem; /* 10px */
3 0.75rem; /* 12px */
3.5 0.875rem; /* 14px */
4 1rem; /* 16px */
5 1.25rem; /* 20px */
6 1.5rem; /* 24px */
7 1.75rem; /* 28px */
8 2rem; /* 32px */
9 2.25rem; /* 36px */
10 2.5rem; /* 40px */
11 2.75rem; /* 44px */
12 3rem; /* 48px */
14 3.5rem; /* 56px */
16 4rem; /* 64px */
20 5rem; /* 80px */
24 6rem; /* 96px */
28 7rem; /* 112px */
32 8rem; /* 128px */
36 9rem; /* 144px */
40 10rem; /* 160px */
44 11rem; /* 176px */
48 12rem; /* 192px */
52 13rem; /* 208px */
56 14rem; /* 224px */
60 15rem; /* 240px */
64 16rem; /* 256px */
72 18rem; /* 288px */
80 20rem; /* 320px */
96 24rem; /* 384px */
auto auto;
negative-1 -0.25rem; (top-right-bottom-left only)
negative-2 -0.5rem; (top-right-bottom-left only)
negative-3 -1rem; (top-right-bottom-left only)
negative-4 -1.5rem; (top-right-bottom-left only)
negative-5 -3rem; (top-right-bottom-left only)
Exemples

Here are some representative examples of these classes:


            .m-0 {
                margin: 0;
            }

            .pr-4 {
                padding-right: 1rem;
            }

            .mx-12 {
                margin-left: 3rem;
                margin-right: 3rem;
            }

            .mb-negative-3 {
                margin-bottom: -1rem;
            }