Mantle Flex

Margin

Controls the space around an element.

Classes#

ClassProperties
p-0padding: 0;
p-1padding: 0.25rem;
p-2padding: 0.5rem;
p-3padding: 1rem;
p-4padding: 1.5rem;
p-5padding: 2rem;
p-6padding: 3rem;
p-7padding: 4rem;
p-8padding: 5rem;
pt-0padding-top: 0;
pt-1padding-top: 0.25rem;
pt-2padding-top: 0.5rem;
pt-3padding-top: 1rem;
pt-4padding-top: 1.5rem;
pt-5padding-top: 2rem;
pt-6padding-top: 3rem;
pt-7padding-top: 4rem;
pt-8padding-top: 5rem;
pr-0padding-right: 0;
pr-1padding-right: 0.25rem;
pr-2padding-right: 0.5rem;
pr-3padding-right: 1rem;
pr-4padding-right: 1.5rem;
pr-5padding-right: 2rem;
pr-6padding-right: 3rem;
pr-7padding-right: 4rem;
pr-8padding-right: 5rem;
pb-0padding-bottom: 0;
pb-1padding-bottom: 0.25rem;
pb-2padding-bottom: 0.5rem;
pb-3padding-bottom: 1rem;
pb-4padding-bottom: 1.5rem;
pb-5padding-bottom: 2rem;
pb-6padding-bottom: 3rem;
pb-7padding-bottom: 4rem;
pb-8padding-bottom: 5rem;
pl-0padding-left: 0;
pl-1padding-left: 0.25rem;
pl-2padding-left: 0.5rem;
pl-3padding-left: 1rem;
pl-4padding-left: 1.5rem;
pl-5padding-left: 2rem;
pl-6padding-left: 3rem;
pl-7padding-left: 4rem;
pl-8padding-left: 5rem;
px-0padding-left: 0;
padding-right: 0;
px-1padding-left: 0.25rem;
padding-right: 0.25rem;
px-2padding-left: 0.5rem;
padding-right: 0.5rem;
px-3padding-left: 1rem;
padding-right: 1rem;
px-4padding-left: 1.5rem;
padding-right: 1.5rem;
px-5padding-left: 2rem;
padding-right: 2rem;
px-6padding-left: 3rem;
padding-right: 3rem;
px-7padding-left: 4rem;
padding-right: 4rem;
px-8padding-left: 5rem;
padding-right: 5rem;
py-0padding-top: 0;
padding-bottom: 0;
py-1padding-top: 0.25rem;
padding-bottom: 0.25rem;
py-2padding-top: 0.5rem;
padding-bottom: 0.5rem;
py-3padding-top: 1rem;
padding-bottom: 1rem;
py-4padding-top: 1.5rem;
padding-bottom: 1.5rem;
py-5padding-top: 2rem;
padding-bottom: 2rem;
py-6padding-top: 3rem;
padding-bottom: 3rem;
py-7padding-top: 4rem;
padding-bottom: 4rem;
py-8padding-top: 5rem;
padding-bottom: 5rem;

Single Side Margin#

Margin can be specified on a specific edge.

mt-5
mr-8
mb-3
ml-6
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="mt-5 border-round-bottom bg-primary font-bold p-3 flex align-items-center justify-content-center">mt-5</div>
    </div>
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="mr-8 border-round-left bg-primary font-bold p-3 flex align-items-center justify-content-center">mr-8</div>
    </div>
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="mb-3 border-round-top bg-primary font-bold p-3 flex align-items-center justify-content-center">mb-3</div>
    </div>
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="ml-6 border-round-right bg-primary font-bold p-3 flex align-items-center justify-content-center">ml-6</div>
    </div>
</div>
 

Horizontal Margin#

Same margin value can be defined at the left and right sides with shorthand classes.

mx-6
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="mx-6 border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">mx-6</div>
    </div>
</div>
 

Vertical Margin#

Same margin value can also be defined at the top and bottom sides with shorthand classes.

my-5
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="my-5 border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">my-5</div>
    </div>
</div>
 

Negative Margin#

Adding - in front of a margin class converts the value to negative.

-mt-5
-mr-8
-mb-3
-ml-6
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="-mt-5 border-round-bottom bg-primary font-bold p-3 flex align-items-center justify-content-center">-mt-5</div>
    </div>
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="-mr-8 border-round-left bg-primary font-bold p-3 flex align-items-center justify-content-center">-mr-8</div>
    </div>
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="-mb-3 border-round-top bg-primary font-bold p-3 flex align-items-center justify-content-center">-mb-3</div>
    </div>
    <div class="bg-primary-100 w-12rem m-3 border-round">
        <div class="-ml-6 border-round-right bg-primary font-bold p-3 flex align-items-center justify-content-center">-ml-6</div>
    </div>
</div>
 

Responsive#

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:m-3 to use a responsive class.

ClassDescription
sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors
my-6 and mx-0 on small screen
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="bg-primary-100 w-20rem m-3 border-round">
        <div class="my-6 mx-0 md:mx-6 md:my-0 border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">my-6 and mx-0 on small screen</div>
    </div>
</div>
 
              Mantle Flex 3.4.1 · Open source on GitHub