Margin

Controls the space around an element.

Classes#

ClassProperties
m-automargin: auto;
mx-automargin-left: auto;
margin-right: auto;
my-automargin-top: auto;
margin-bottom: auto;
mt-automargin-top: auto;
mb-automargin-bottom: auto;
ml-automargin-left: auto;
mr-automargin-right: auto;
m-0margin: 0;
m-1margin: 0.25rem;
m-2margin: 0.5rem;
m-3margin: 1rem;
m-4margin: 1.5rem;
m-5margin: 2rem;
m-6margin: 3rem;
m-7margin: 4rem;
m-8margin: 5rem;
mt-0margin-top: 0;
mt-1margin-top: 0.25rem;
mt-2margin-top: 0.5rem;
mt-3margin-top: 1rem;
mt-4margin-top: 1.5rem;
mt-5margin-top: 2rem;
mt-6margin-top: 3rem;
mt-7margin-top: 4rem;
mt-8margin-top: 5rem;
mr-0margin-right: 0;
mr-1margin-right: 0.25rem;
mr-2margin-right: 0.5rem;
mr-3margin-right: 1rem;
mr-4margin-right: 1.5rem;
mr-5margin-right: 2rem;
mr-6margin-right: 3rem;
mr-7margin-right: 4rem;
mr-8margin-right: 5rem;
mb-0margin-bottom: 0;
mb-1margin-bottom: 0.25rem;
mb-2margin-bottom: 0.5rem;
mb-3margin-bottom: 1rem;
mb-4margin-bottom: 1.5rem;
mb-5margin-bottom: 2rem;
mb-6margin-bottom: 3rem;
mb-7margin-bottom: 4rem;
mb-8margin-bottom: 5rem;
ml-0margin-left: 0;
ml-1margin-left: 0.25rem;
ml-2margin-left: 0.5rem;
ml-3margin-left: 1rem;
ml-4margin-left: 1.5rem;
ml-5margin-left: 2rem;
ml-6margin-left: 3rem;
ml-7margin-left: 4rem;
ml-8margin-left: 5rem;
mx-0margin-left: 0;
margin-right: 0;
mx-1margin-left: 0.25rem;
margin-right: 0.25rem;
mx-2margin-left: 0.5rem;
margin-right: 0.5rem;
mx-3margin-left: 1rem;
margin-right: 1rem;
mx-4margin-left: 1.5rem;
margin-right: 1.5rem;
mx-5margin-left: 2rem;
margin-right: 2rem;
mx-6margin-left: 3rem;
margin-right: 3rem;
mx-7margin-left: 4rem;
margin-right: 4rem;
mx-8margin-left: 5rem;
margin-right: 5rem;
my-0margin-top: 0;
margin-bottom: 0;
my-1margin-top: 0.25rem;
margin-bottom: 0.25rem;
my-2margin-top: 0.5rem;
margin-bottom: 0.5rem;
my-3margin-top: 1rem;
margin-bottom: 1rem;
my-4margin-top: 1.5rem;
margin-bottom: 1.5rem;
my-5margin-top: 2rem;
margin-bottom: 2rem;
my-6margin-top: 3rem;
margin-bottom: 3rem;
my-7margin-top: 4rem;
margin-bottom: 4rem;
my-8margin-top: 5rem;
margin-bottom: 5rem;
-m-1margin: -0.25rem;
-m-2margin: 0-.5rem;
-m-3margin: -1rem;
-m-4margin: -1.5rem;
-m-5margin: -2rem;
-m-6margin: -3rem;
-m-7margin: -4rem;
-m-8margin: -5rem;
-mt-1margin-top: -0.25rem;
-mt-2margin-top: -0.5rem;
-mt-3margin-top: -1rem;
-mt-4margin-top: -1.5rem;
-mt-5margin-top: -2rem;
-mt-6margin-top: -3rem;
-mt-7margin-top: -4rem;
-mt-8margin-top: -5rem;
-mr-1margin-right: -0.25rem;
-mr-2margin-right: -0.5rem;
-mr-3margin-right: -1rem;
-mr-4margin-right: -1.5rem;
-mr-5margin-right: -2rem;
-mr-6margin-right: -3rem;
-mr-7margin-right: -4rem;
-mr-8margin-right: -5rem;
-mb-1margin-bottom: -0.25rem;
-mb-2margin-bottom: -0.5rem;
-mb-3margin-bottom: -1rem;
-mb-4margin-bottom: -1.5rem;
-mb-5margin-bottom: -2rem;
-mb-6margin-bottom: -3rem;
-mb-7margin-bottom: -4rem;
-mb-8margin-bottom: -5rem;
-ml-1margin-left: -0.25rem;
-ml-2margin-left: -0.5rem;
-ml-3margin-left: -1rem;
-ml-4margin-left: -1.5rem;
-ml-5margin-left: -2rem;
-ml-6margin-left: -3rem;
-ml-7margin-left: -4rem;
-ml-8margin-left: -5rem;
-mx-1margin-left: -0.25rem;
margin-right: -0.25rem;
-mx-2margin-left: -0.5rem;
margin-right: -0.5rem;
-mx-3margin-left: -1rem;
margin-right: -1rem;
-mx-4margin-left: -1.5rem;
margin-right: -1.5rem;
-mx-5margin-left: -2rem;
margin-right: -2rem;
-mx-6margin-left: -3rem;
margin-right: -3rem;
-mx-7margin-left: -4rem;
margin-right: -4rem;
-mx-8margin-left: -5rem;
margin-right: -5rem;
-my-1margin-top: -0.25rem;
margin-bottom: -0.25rem;
-my-2margin-top: -0.5rem;
margin-bottom: -0.5rem;
-my-3margin-top: -1rem;
margin-bottom: -1rem;
-my-4margin-top: -1.5rem;
margin-bottom: -1.5rem;
-my-5margin-top: -2rem;
margin-bottom: -2rem;
-my-6margin-top: -3rem;
margin-bottom: -3rem;
-my-7margin-top: -4rem;
margin-bottom: -4rem;
-my-8margin-top: -5rem;
margin-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>
 
              PrimeFlex 3.3.1 by PrimeTek