MicronCSS

Spacing

Padding

Class
Property
p-0padding: 0;
pl-0padding-left: 0;
pr-0padding-right: 0;
pt-0padding-top: 0;
pb-0padding-bottom: 0;
px-0padding-left: 0;
padding-right: 0;
py-0padding-block: 0;
p-0.5padding: 0.0625rem;  /* 1px */
pl-0.5padding-left: 0.0625rem;  /* 1px */
pr-0.5padding-right: 0.0625rem;  /* 1px */
pt-0.5padding-top: 0.0625rem;  /* 1px */
pb-0.5padding-bottom: 0.0625rem;  /* 1px */
px-0.5padding-left: 0.0625rem;  /* 1px */
padding-right: 0.0625rem;  /* 1px */
py-0.5padding-block: 0.0625rem;  /* 1px */
p-1padding: 0.125rem;  /* 2px */
pl-1padding-left: 0.125rem;  /* 2px */
pr-1padding-right: 0.125rem;  /* 2px */
pt-1padding-top: 0.125rem;  /* 2px */
pb-1padding-bottom: 0.125rem;  /* 2px */
px-1padding-left: 0.125rem;  /* 2px */
padding-right: 0.125rem;  /* 2px */
py-1padding-block: 0.125rem;  /* 2px */
p-1.5padding: 0.25rem;  /* 4px */
pl-1.5padding-left: 0.25rem;  /* 4px */
pr-1.5padding-right: 0.25rem;  /* 4px */
pt-1.5padding-top: 0.25rem;  /* 4px */
pb-1.5padding-bottom: 0.25rem;  /* 4px */
px-1.5padding-left: 0.25rem;  /* 4px */
padding-right: 0.25rem;  /* 4px */
py-1.5padding-block: 0.25rem;  /* 4px */
p-2padding: 0.375rem;  /* 6px */
pl-2padding-left: 0.375rem;  /* 6px */
pr-2padding-right: 0.375rem;  /* 6px */
pt-2padding-top: 0.375rem;  /* 6px */
pb-2padding-bottom: 0.375rem;  /* 6px */
px-2padding-left: 0.375rem;  /* 6px */
padding-right: 0.375rem;  /* 6px */
py-2padding-block: 0.375rem;  /* 6px */
p-2.5padding: 0.5rem;  /* 8px */
pl-2.5padding-left: 0.5rem;  /* 8px */
pr-2.5padding-right: 0.5rem;  /* 8px */
pt-2.5padding-top: 0.5rem;  /* 8px */
pb-2.5padding-bottom: 0.5rem;  /* 8px */
px-2.5padding-left: 0.5rem;  /* 8px */
padding-right: 0.5rem;  /* 8px */
py-2.5padding-block: 0.5rem;  /* 8px */
p-3padding: 0625rem;  /* 10px */
pl-3padding-left: 0625rem;  /* 10px */
pr-3padding-right: 0625rem;  /* 10px */
pt-3padding-top: 0625rem;  /* 10px */
pb-3padding-bottom: 0625rem;  /* 10px */
px-3padding-left: 0625rem;  /* 10px */
padding-right: 0625rem;  /* 10px */
py-3padding-block: 0625rem;  /* 10px */
p-3.5padding: 0.75rem;  /* 12px */
pl-3.5padding-left: 0.75rem;  /* 12px */
pr-3.5padding-right: 0.75rem;  /* 12px */
pt-3.5padding-top: 0.75rem;  /* 12px */
pb-3.5padding-bottom: 0.75rem;  /* 12px */
px-3.5padding-left: 0.75rem;  /* 12px */
padding-right: 0.75rem;  /* 12px */
py-3.5padding-block: 0.75rem;  /* 12px */
p-4padding: 0.875rem;  /* 14px */
pl-4padding-left: 0.875rem;  /* 14px */
pr-4padding-right: 0.875rem;  /* 14px */
pt-4padding-top: 0.875rem;  /* 14px */
pb-4padding-bottom: 0.875rem;  /* 14px */
px-4padding-left: 0.875rem;  /* 14px */
padding-right: 0.875rem;  /* 14px */
py-4padding-block: 0.875rem;  /* 14px */
p-5padding: 1rem;  /* 16px */
pl-5padding-left: 1rem;  /* 16px */
pr-5padding-right: 1rem;  /* 16px */
pt-5padding-top: 1rem;  /* 16px */
pb-5padding-bottom: 1rem;  /* 16px */
px-5padding-left: 1rem;  /* 16px */
padding-right: 1rem;  /* 16px */
py-5padding-block: 1rem;  /* 16px */
p-6padding: 1.25rem;  /* 20px */
pl-6padding-left: 1.25rem;  /* 20px */
pr-6padding-right: 1.25rem;  /* 20px */
pt-6padding-top: 1.25rem;  /* 20px */
pb-6padding-bottom: 1.25rem;  /* 20px */
px-6padding-left: 1.25rem;  /* 20px */
padding-right: 1.25rem;  /* 20px */
py-6padding-block: 1.25rem;  /* 20px */
p-7padding: 1.5rem;  /* 24px */
pl-7padding-left: 1.5rem;  /* 24px */
pr-7padding-right: 1.5rem;  /* 24px */
pt-7padding-top: 1.5rem;  /* 24px */
pb-7padding-bottom: 1.5rem;  /* 24px */
px-7padding-left: 1.5rem;  /* 24px */
padding-right: 1.5rem;  /* 24px */
py-7padding-block: 1.5rem;  /* 24px */
p-8padding: 1.75rem;  /* 28px */
pl-8padding-left: 1.75rem;  /* 28px */
pr-8padding-right: 1.75rem;  /* 28px */
pt-8padding-top: 1.75rem;  /* 28px */
pb-8padding-bottom: 1.75rem;  /* 28px */
px-8padding-left: 1.75rem;  /* 28px */
padding-right: 1.75rem;  /* 28px */
py-8padding-block: 1.75rem;  /* 28px */
p-9padding: 2rem;  /* 32px */
pl-9padding-left: 2rem;  /* 32px */
pr-9padding-right: 2rem;  /* 32px */
pt-9padding-top: 2rem;  /* 32px */
pb-9padding-bottom: 2rem;  /* 32px */
px-9padding-left: 2rem;  /* 32px */
padding-right: 2rem;  /* 32px */
py-9padding-block: 2rem;  /* 32px */
p-10padding: 2.25rem;  /* 36px */
pl-10padding-left: 2.25rem;  /* 36px */
pr-10padding-right: 2.25rem;  /* 36px */
pt-10padding-top: 2.25rem;  /* 36px */
pb-10padding-bottom: 2.25rem;  /* 36px */
px-10padding-left: 2.25rem;  /* 36px */
padding-right: 2.25rem;  /* 36px */
py-10padding-block: 2.25rem;  /* 36px */
p-11padding: 2.5rem;  /* 40px */
pl-11padding-left: 2.5rem;  /* 40px */
pr-11padding-right: 2.5rem;  /* 40px */
pt-11padding-top: 2.5rem;  /* 40px */
pb-11padding-bottom: 2.5rem;  /* 40px */
px-11padding-left: 2.5rem;  /* 40px */
padding-right: 2.5rem;  /* 40px */
py-11padding-block: 2.5rem;  /* 40px */
p-12padding: 2.75rem;  /* 44px */
pl-12padding-left: 2.75rem;  /* 44px */
pr-12padding-right: 2.75rem;  /* 44px */
pt-12padding-top: 2.75rem;  /* 44px */
pb-12padding-bottom: 2.75rem;  /* 44px */
px-12padding-left: 2.75rem;  /* 44px */
padding-right: 2.75rem;  /* 44px */
py-12padding-block: 2.75rem;  /* 44px */
p-14padding: 3rem;  /* 48px */
pl-14padding-left: 3rem;  /* 48px */
pr-14padding-right: 3rem;  /* 48px */
pt-14padding-top: 3rem;  /* 48px */
pb-14padding-bottom: 3rem;  /* 48px */
px-14padding-left: 3rem;  /* 48px */
padding-right: 3rem;  /* 48px */
py-14padding-block: 3rem;  /* 48px */
p-16padding: 3.25rem;  /* 52px */
pl-16padding-left: 3.25rem;  /* 52px */
pr-16padding-right: 3.25rem;  /* 52px */
pt-16padding-top: 3.25rem;  /* 52px */
pb-16padding-bottom: 3.25rem;  /* 52px */
px-16padding-left: 3.25rem;  /* 52px */
padding-right: 3.25rem;  /* 52px */
py-16padding-block: 3.25rem;  /* 52px */
p-20padding: 3.5rem;  /* 56px */
pl-20padding-left: 3.5rem;  /* 56px */
pr-20padding-right: 3.5rem;  /* 56px */
pt-20padding-top: 3.5rem;  /* 56px */
pb-20padding-bottom: 3.5rem;  /* 56px */
px-20padding-left: 3.5rem;  /* 56px */
padding-right: 3.5rem;  /* 56px */
py-20padding-block: 3.5rem;  /* 56px */
p-24padding: 3.75rem;  /* 60px */
pl-24padding-left: 3.75rem;  /* 60px */
pr-24padding-right: 3.75rem;  /* 60px */
pt-24padding-top: 3.75rem;  /* 60px */
pb-24padding-bottom: 3.75rem;  /* 60px */
px-24padding-left: 3.75rem;  /* 60px */
padding-right: 3.75rem;  /* 60px */
py-24padding-block: 3.75rem;  /* 60px */
p-28padding: 4rem;  /* 64px */
pl-28padding-left: 4rem;  /* 64px */
pr-28padding-right: 4rem;  /* 64px */
pt-28padding-top: 4rem;  /* 64px */
pb-28padding-bottom: 4rem;  /* 64px */
px-28padding-left: 4rem;  /* 64px */
padding-right: 4rem;  /* 64px */
py-28padding-block: 4rem;  /* 64px */
p-32padding: 5rem;  /* 80px */
pl-32padding-left: 5rem;  /* 80px */
pr-32padding-right: 5rem;  /* 80px */
pt-32padding-top: 5rem;  /* 80px */
pb-32padding-bottom: 5rem;  /* 80px */
px-32padding-left: 5rem;  /* 80px */
padding-right: 5rem;  /* 80px */
py-32padding-block: 5rem;  /* 80px */
p-36padding: 6rem;  /* 96px */
pl-36padding-left: 6rem;  /* 96px */
pr-36padding-right: 6rem;  /* 96px */
pt-36padding-top: 6rem;  /* 96px */
pb-36padding-bottom: 6rem;  /* 96px */
px-36padding-left: 6rem;  /* 96px */
padding-right: 6rem;  /* 96px */
py-36padding-block: 6rem;  /* 96px */
p-40padding: 7rem;  /* 112px */
pl-40padding-left: 7rem;  /* 112px */
pr-40padding-right: 7rem;  /* 112px */
pt-40padding-top: 7rem;  /* 112px */
pb-40padding-bottom: 7rem;  /* 112px */
px-40padding-left: 7rem;  /* 112px */
padding-right: 7rem;  /* 112px */
py-40padding-block: 7rem;  /* 112px */
p-44padding: 8rem;  /* 128px */
pl-44padding-left: 8rem;  /* 128px */
pr-44padding-right: 8rem;  /* 128px */
pt-44padding-top: 8rem;  /* 128px */
pb-44padding-bottom: 8rem;  /* 128px */
px-44padding-left: 8rem;  /* 128px */
padding-right: 8rem;  /* 128px */
py-44padding-block: 8rem;  /* 128px */
p-48padding: 9rem;  /* 144px */
pl-48padding-left: 9rem;  /* 144px */
pr-48padding-right: 9rem;  /* 144px */
pt-48padding-top: 9rem;  /* 144px */
pb-48padding-bottom: 9rem;  /* 144px */
px-48padding-left: 9rem;  /* 144px */
padding-right: 9rem;  /* 144px */
py-48padding-block: 9rem;  /* 144px */
p-52padding: 10rem;  /* 160px */
pl-52padding-left: 10rem;  /* 160px */
pr-52padding-right: 10rem;  /* 160px */
pt-52padding-top: 10rem;  /* 160px */
pb-52padding-bottom: 10rem;  /* 160px */
px-52padding-left: 10rem;  /* 160px */
padding-right: 10rem;  /* 160px */
py-52padding-block: 10rem;  /* 160px */
p-56padding: 11rem;  /* 176px */
pl-56padding-left: 11rem;  /* 176px */
pr-56padding-right: 11rem;  /* 176px */
pt-56padding-top: 11rem;  /* 176px */
pb-56padding-bottom: 11rem;  /* 176px */
px-56padding-left: 11rem;  /* 176px */
padding-right: 11rem;  /* 176px */
py-56padding-block: 11rem;  /* 176px */
p-60padding: 12rem;  /* 192px */
pl-60padding-left: 12rem;  /* 192px */
pr-60padding-right: 12rem;  /* 192px */
pt-60padding-top: 12rem;  /* 192px */
pb-60padding-bottom: 12rem;  /* 192px */
px-60padding-left: 12rem;  /* 192px */
padding-right: 12rem;  /* 192px */
py-60padding-block: 12rem;  /* 192px */
p-64padding: 13rem;  /* 208px */
pl-64padding-left: 13rem;  /* 208px */
pr-64padding-right: 13rem;  /* 208px */
pt-64padding-top: 13rem;  /* 208px */
pb-64padding-bottom: 13rem;  /* 208px */
px-64padding-left: 13rem;  /* 208px */
padding-right: 13rem;  /* 208px */
py-64padding-block: 13rem;  /* 208px */
p-72padding: 14rem;  /* 224px */
pl-72padding-left: 14rem;  /* 224px */
pr-72padding-right: 14rem;  /* 224px */
pt-72padding-top: 14rem;  /* 224px */
pb-72padding-bottom: 14rem;  /* 224px */
px-72padding-left: 14rem;  /* 224px */
padding-left: 14rem;  /* 224px */
py-72padding-block: 14rem;  /* 224px */
p-80padding: 15rem;  /* 240px */
pl-80padding-left: 15rem;  /* 240px */
pr-80padding-right: 15rem;  /* 240px */
pt-80padding-top: 15rem;  /* 240px */
pb-80padding-bottom: 15rem;  /* 240px */
px-80padding-left: 15rem;  /* 240px */
padding-right: 15rem;  /* 240px */
py-80padding-block: 15rem;  /* 240px */
p-88padding: 16rem;  /* 256px */
pl-88padding-left: 16rem;  /* 256px */
pr-88padding-right: 16rem;  /* 256px */
pt-88padding-top: 16rem;  /* 256px */
pb-88padding-bottom: 16rem;  /* 256px */
px-88padding-left: 16rem;  /* 256px */
padding-right: 16rem;  /* 256px */
py-88padding-block: 16rem;  /* 256px */
p-96padding: 18rem;  /* 288px */
pl-96padding-left: 18rem;  /* 288px */
pr-96padding-right: 18rem;  /* 288px */
pt-96padding-top: 18rem;  /* 288px */
pb-96padding-bottom: 18rem;  /* 288px */
px-96padding-left: 18rem;  /* 288px */
padding-right: 18rem;  /* 288px */
py-96padding-block: 18rem;  /* 288px */
p-104padding: 20rem;  /* 320px */
pl-104padding-left: 20rem;  /* 320px */
pr-104padding-right: 20rem;  /* 320px */
pt-104padding-top: 20rem;  /* 320px */
pb-104padding-bottom: 20rem;  /* 320px */
px-104padding-left: 20rem;  /* 320px */
padding-right: 20rem;  /* 320px */
py-104padding-block: 20rem;  /* 320px */
p-112padding: 22rem;  /* 352px */
pl-112padding-left: 22rem;  /* 352px */
pr-112padding-right: 22rem;  /* 352px */
pt-112padding-top: 22rem;  /* 352px */
pb-112padding-bottom: 22rem;  /* 352px */
px-112padding-left: 22rem;  /* 352px */
padding-right: 22rem;  /* 352px */
py-112padding-block: 22rem;  /* 352px */
p-120padding: 24rem;  /* 384px */
pl-120padding-left: 24rem;  /* 384px */
pr-120padding-right: 24rem;  /* 384px */
pt-120padding-top: 24rem;  /* 384px */
pb-120padding-bottom: 24rem;  /* 384px */
px-120padding-left: 24rem;  /* 384px */
padding-right: 24rem;  /* 384px */
py-120padding-block: 24rem;  /* 384px */
p-128padding: 26rem;  /* 416px */
pl-128padding-left: 26rem;  /* 416px */
pr-128padding-right: 26rem;  /* 416px */
pt-128padding-top: 26rem;  /* 416px */
pb-128padding-bottom: 26rem;  /* 416px */
px-128padding-left: 26rem;  /* 416px */
padding-right: 26rem;  /* 416px */
py-128padding-block: 26rem;  /* 416px */
p-136padding: 28rem;  /* 448px */
pl-136padding-left: 28rem;  /* 448px */
pr-136padding-right: 28rem;  /* 448px */
pt-136padding-top: 28rem;  /* 448px */
pb-136padding-bottom: 28rem;  /* 448px */
px-136padding-left: 28rem;  /* 448px */
padding-right: 28rem;  /* 448px */
py-136padding-block: 28rem;  /* 448px */
p-144padding: 30rem;  /* 480px */
pl-144padding-left: 30rem;  /* 480px */
pr-144padding-right: 30rem;  /* 480px */
pt-144padding-top: 30rem;  /* 480px */
pb-144padding-bottom: 30rem;  /* 480px */
px-144padding-left: 30rem;  /* 480px */
padding-right: 30rem;  /* 480px */
py-144padding-block: 30rem;  /* 480px */
p-152padding: 32rem;  /* 512px */
pl-152padding-left: 32rem;  /* 512px */
pr-152padding-right: 32rem;  /* 512px */
pt-152padding-top: 32rem;  /* 512px */
pb-152padding-bottom: 32rem;  /* 512px */
px-152padding-left: 32rem;  /* 512px */
padding-right: 32rem;  /* 512px */
py-152padding-block: 32rem;  /* 512px */

Usage

Use p{arg}-{n} to set the padding for an element of n value.

<button class="py-2 px-4">Click Me</button>
<!-- 
"py-2" sets padding block to 0.375em (_6px_), 
and "px-4" sets padding left & right to 0.875em (_14px_). 
-->

Margin

Class
Property
m-0margin: 0;
ml-0margin-left: 0;
mr-0margin-right: 0;
mt-0margin-top: 0;
mb-0margin-bottom: 0;
mx-0margin-left: 0;
margin-right: 0;
my-0margin-block: 0;
m-automargin: auto;
ml-automargin-left: auto;
mr-automargin-right: auto;
mt-automargin-top: auto;
mb-automargin-bottom: auto;
mx-automargin-left: auto;
margin-right: auto;
my-automargin-block: auto;
m-0.5margin: 0.0625rem;  /* 1px */
ml-0.5margin-left: 0.0625rem;  /* 1px */
mr-0.5margin-right: 0.0625rem;  /* 1px */
mt-0.5margin-top: 0.0625rem;  /* 1px */
mb-0.5margin-bottom: 0.0625rem;  /* 1px */
mx-0.5margin-left: 0.0625rem;  /* 1px */
margin-right: 0.0625rem;  /* 1px */
my-0.5margin-block: 0.0625rem;  /* 1px */
m-1margin: 0.125rem;  /* 2px */
ml-1margin-left: 0.125rem;  /* 2px */
mr-1margin-right: 0.125rem;  /* 2px */
mt-1margin-top: 0.125rem;  /* 2px */
mb-1margin-bottom: 0.125rem;  /* 2px */
mx-1margin-left: 0.125rem;  /* 2px */
margin-right: 0.125rem;  /* 2px */
my-1margin-block: 0.125rem;  /* 2px */
m-1.5margin: 0.25rem;  /* 4px */
ml-1.5margin-left: 0.25rem;  /* 4px */
mr-1.5margin-right: 0.25rem;  /* 4px */
mt-1.5margin-top: 0.25rem;  /* 4px */
mb-1.5margin-bottom: 0.25rem;  /* 4px */
mx-1.5margin-left: 0.25rem;  /* 4px */
margin-right: 0.25rem;  /* 4px */
my-1.5margin-block: 0.25rem;  /* 4px */
m-2margin: 0.375rem;  /* 6px */
ml-2margin-left: 0.375rem;  /* 6px */
mr-2margin-right: 0.375rem;  /* 6px */
mt-2margin-top: 0.375rem;  /* 6px */
mb-2margin-bottom: 0.375rem;  /* 6px */
mx-2margin-left: 0.375rem;  /* 6px */
margin-right: 0.375rem;  /* 6px */
my-2margin-block: 0.375rem;  /* 6px */
m-2.5margin: 0.5rem;  /* 8px */
ml-2.5margin-left: 0.5rem;  /* 8px */
mr-2.5margin-right: 0.5rem;  /* 8px */
mt-2.5margin-top: 0.5rem;  /* 8px */
mb-2.5margin-bottom: 0.5rem;  /* 8px */
mx-2.5margin-left: 0.5rem;  /* 8px */
margin-right: 0.5rem;  /* 8px */
my-2.5margin-block: 0.5rem;  /* 8px */
m-3margin: 0625rem;  /* 10px */
ml-3margin-left: 0625rem;  /* 10px */
mr-3margin-right: 0625rem;  /* 10px */
mt-3margin-top: 0625rem;  /* 10px */
mb-3margin-bottom: 0625rem;  /* 10px */
mx-3margin-left: 0625rem;  /* 10px */
margin-right: 0625rem;  /* 10px */
my-3margin-block: 0625rem;  /* 10px */
m-3.5margin: 0.75rem;  /* 12px */
ml-3.5margin-left: 0.75rem;  /* 12px */
mr-3.5margin-right: 0.75rem;  /* 12px */
mt-3.5margin-top: 0.75rem;  /* 12px */
mb-3.5margin-bottom: 0.75rem;  /* 12px */
mx-3.5margin-left: 0.75rem;  /* 12px */
margin-right: 0.75rem;  /* 12px */
my-3.5margin-block: 0.75rem;  /* 12px */
m-4margin: 0.875rem;  /* 14px */
ml-4margin-left: 0.875rem;  /* 14px */
mr-4margin-right: 0.875rem;  /* 14px */
mt-4margin-top: 0.875rem;  /* 14px */
mb-4margin-bottom: 0.875rem;  /* 14px */
mx-4margin-left: 0.875rem;  /* 14px */
margin-right: 0.875rem;  /* 14px */
my-4margin-block: 0.875rem;  /* 14px */
m-5margin: 1rem;  /* 16px */
ml-5margin-left: 1rem;  /* 16px */
mr-5margin-right: 1rem;  /* 16px */
mt-5margin-top: 1rem;  /* 16px */
mb-5margin-bottom: 1rem;  /* 16px */
mx-5margin-left: 1rem;  /* 16px */
margin-right: 1rem;  /* 16px */
my-5margin-block: 1rem;  /* 16px */
m-6margin: 1.25rem;  /* 20px */
ml-6margin-left: 1.25rem;  /* 20px */
mr-6margin-right: 1.25rem;  /* 20px */
mt-6margin-top: 1.25rem;  /* 20px */
mb-6margin-bottom: 1.25rem;  /* 20px */
mx-6margin-left: 1.25rem;  /* 20px */
margin-right: 1.25rem;  /* 20px */
my-6margin-block: 1.25rem;  /* 20px */
m-7margin: 1.5rem;  /* 24px */
ml-7margin-left: 1.5rem;  /* 24px */
mr-7margin-right: 1.5rem;  /* 24px */
mt-7margin-top: 1.5rem;  /* 24px */
mb-7margin-bottom: 1.5rem;  /* 24px */
mx-7margin-left: 1.5rem;  /* 24px */
margin-right: 1.5rem;  /* 24px */
my-7margin-block: 1.5rem;  /* 24px */
m-8margin: 1.75rem;  /* 28px */
ml-8margin-left: 1.75rem;  /* 28px */
mr-8margin-right: 1.75rem;  /* 28px */
mt-8margin-top: 1.75rem;  /* 28px */
mb-8margin-bottom: 1.75rem;  /* 28px */
mx-8margin-left: 1.75rem;  /* 28px */
margin-right: 1.75rem;  /* 28px */
my-8margin-block: 1.75rem;  /* 28px */
m-9margin: 2rem;  /* 32px */
ml-9margin-left: 2rem;  /* 32px */
mr-9margin-right: 2rem;  /* 32px */
mt-9margin-top: 2rem;  /* 32px */
mb-9margin-bottom: 2rem;  /* 32px */
mx-9margin-left: 2rem;  /* 32px */
margin-right: 2rem;  /* 32px */
my-9margin-block: 2rem;  /* 32px */
m-10margin: 2.25rem;  /* 36px */
ml-10margin-left: 2.25rem;  /* 36px */
mr-10margin-right: 2.25rem;  /* 36px */
mt-10margin-top: 2.25rem;  /* 36px */
mb-10margin-bottom: 2.25rem;  /* 36px */
mx-10margin-left: 2.25rem;  /* 36px */
margin-right: 2.25rem;  /* 36px */
my-10margin-block: 2.25rem;  /* 36px */
m-11margin: 2.5rem;  /* 40px */
ml-11margin-left: 2.5rem;  /* 40px */
mr-11margin-right: 2.5rem;  /* 40px */
mt-11margin-top: 2.5rem;  /* 40px */
mb-11margin-bottom: 2.5rem;  /* 40px */
mx-11margin-left: 2.5rem;  /* 40px */
margin-right: 2.5rem;  /* 40px */
my-11margin-block: 2.5rem;  /* 40px */
m-12margin: 2.75rem;  /* 44px */
ml-12margin-left: 2.75rem;  /* 44px */
mr-12margin-right: 2.75rem;  /* 44px */
mt-12margin-top: 2.75rem;  /* 44px */
mb-12margin-bottom: 2.75rem;  /* 44px */
mx-12margin-left: 2.75rem;  /* 44px */
margin-right: 2.75rem;  /* 44px */
my-12margin-block: 2.75rem;  /* 44px */
m-14margin: 3rem;  /* 48px */
ml-14margin-left: 3rem;  /* 48px */
mr-14margin-right: 3rem;  /* 48px */
mt-14margin-top: 3rem;  /* 48px */
mb-14margin-bottom: 3rem;  /* 48px */
mx-14margin-left: 3rem;  /* 48px */
margin-right: 3rem;  /* 48px */
my-14margin-block: 3rem;  /* 48px */
m-16margin: 3.25rem;  /* 52px */
ml-16margin-left: 3.25rem;  /* 52px */
mr-16margin-right: 3.25rem;  /* 52px */
mt-16margin-top: 3.25rem;  /* 52px */
mb-16margin-bottom: 3.25rem;  /* 52px */
mx-16margin-left: 3.25rem;  /* 52px */
margin-right: 3.25rem;  /* 52px */
my-16margin-block: 3.25rem;  /* 52px */
m-20margin: 3.5rem;  /* 56px */
ml-20margin-left: 3.5rem;  /* 56px */
mr-20margin-right: 3.5rem;  /* 56px */
mt-20margin-top: 3.5rem;  /* 56px */
mb-20margin-bottom: 3.5rem;  /* 56px */
mx-20margin-left: 3.5rem;  /* 56px */
margin-right: 3.5rem;  /* 56px */
my-20margin-block: 3.5rem;  /* 56px */
m-24margin: 3.75rem;  /* 60px */
ml-24margin-left: 3.75rem;  /* 60px */
mr-24margin-right: 3.75rem;  /* 60px */
mt-24margin-top: 3.75rem;  /* 60px */
mb-24margin-bottom: 3.75rem;  /* 60px */
mx-24margin-left: 3.75rem;  /* 60px */
margin-right: 3.75rem;  /* 60px */
my-24margin-block: 3.75rem;  /* 60px */
m-28margin: 4rem;  /* 64px */
ml-28margin-left: 4rem;  /* 64px */
mr-28margin-right: 4rem;  /* 64px */
mt-28margin-top: 4rem;  /* 64px */
mb-28margin-bottom: 4rem;  /* 64px */
mx-28margin-left: 4rem;  /* 64px */
margin-right: 4rem;  /* 64px */
my-28margin-block: 4rem;  /* 64px */
m-32margin: 5rem;  /* 80px */
ml-32margin-left: 5rem;  /* 80px */
mr-32margin-right: 5rem;  /* 80px */
mt-32margin-top: 5rem;  /* 80px */
mb-32margin-bottom: 5rem;  /* 80px */
mx-32margin-left: 5rem;  /* 80px */
margin-right: 5rem;  /* 80px */
my-32margin-block: 5rem;  /* 80px */
m-36margin: 6rem;  /* 96px */
ml-36margin-left: 6rem;  /* 96px */
mr-36margin-right: 6rem;  /* 96px */
mt-36margin-top: 6rem;  /* 96px */
mb-36margin-bottom: 6rem;  /* 96px */
mx-36margin-left: 6rem;  /* 96px */
margin-right: 6rem;  /* 96px */
my-36margin-block: 6rem;  /* 96px */
m-40margin: 7rem;  /* 112px */
ml-40margin-left: 7rem;  /* 112px */
mr-40margin-right: 7rem;  /* 112px */
mt-40margin-top: 7rem;  /* 112px */
mb-40margin-bottom: 7rem;  /* 112px */
mx-40margin-left: 7rem;  /* 112px */
margin-right: 7rem;  /* 112px */
my-40margin-block: 7rem;  /* 112px */
m-44margin: 8rem;  /* 128px */
ml-44margin-left: 8rem;  /* 128px */
mr-44margin-right: 8rem;  /* 128px */
mt-44margin-top: 8rem;  /* 128px */
mb-44margin-bottom: 8rem;  /* 128px */
mx-44margin-left: 8rem;  /* 128px */
margin-right: 8rem;  /* 128px */
my-44margin-block: 8rem;  /* 128px */
m-48margin: 9rem;  /* 144px */
ml-48margin-left: 9rem;  /* 144px */
mr-48margin-right: 9rem;  /* 144px */
mt-48margin-top: 9rem;  /* 144px */
mb-48margin-bottom: 9rem;  /* 144px */
mx-48margin-left: 9rem;  /* 144px */
margin-right: 9rem;  /* 144px */
my-48margin-block: 9rem;  /* 144px */
m-52margin: 10rem;  /* 160px */
ml-52margin-left: 10rem;  /* 160px */
mr-52margin-right: 10rem;  /* 160px */
mt-52margin-top: 10rem;  /* 160px */
mb-52margin-bottom: 10rem;  /* 160px */
mx-52margin-left: 10rem;  /* 160px */
margin-right: 10rem;  /* 160px */
my-52margin-block: 10rem;  /* 160px */
m-56margin: 11rem;  /* 176px */
ml-56margin-left: 11rem;  /* 176px */
mr-56margin-right: 11rem;  /* 176px */
mt-56margin-top: 11rem;  /* 176px */
mb-56margin-bottom: 11rem;  /* 176px */
mx-56margin-left: 11rem;  /* 176px */
margin-right: 11rem;  /* 176px */
my-56margin-block: 11rem;  /* 176px */
m-60margin: 12rem;  /* 192px */
ml-60margin-left: 12rem;  /* 192px */
mr-60margin-right: 12rem;  /* 192px */
mt-60margin-top: 12rem;  /* 192px */
mb-60margin-bottom: 12rem;  /* 192px */
mx-60margin-left: 12rem;  /* 192px */
margin-right: 12rem;  /* 192px */
my-60margin-block: 12rem;  /* 192px */
m-64margin: 13rem;  /* 208px */
ml-64margin-left: 13rem;  /* 208px */
mr-64margin-right: 13rem;  /* 208px */
mt-64margin-top: 13rem;  /* 208px */
mb-64margin-bottom: 13rem;  /* 208px */
mx-64margin-left: 13rem;  /* 208px */
margin-right: 13rem;  /* 208px */
my-64margin-block: 13rem;  /* 208px */
m-72margin: 14rem;  /* 224px */
ml-72margin-left: 14rem;  /* 224px */
mr-72margin-right: 14rem;  /* 224px */
mt-72margin-top: 14rem;  /* 224px */
mb-72margin-bottom: 14rem;  /* 224px */
mx-72margin-left: 14rem;  /* 224px */
margin-left: 14rem;  /* 224px */
my-72margin-block: 14rem;  /* 224px */
m-80margin: 15rem;  /* 240px */
ml-80margin-left: 15rem;  /* 240px */
mr-80margin-right: 15rem;  /* 240px */
mt-80margin-top: 15rem;  /* 240px */
mb-80margin-bottom: 15rem;  /* 240px */
mx-80margin-left: 15rem;  /* 240px */
margin-right: 15rem;  /* 240px */
my-80margin-block: 15rem;  /* 240px */
m-88margin: 16rem;  /* 256px */
ml-88margin-left: 16rem;  /* 256px */
mr-88margin-right: 16rem;  /* 256px */
mt-88margin-top: 16rem;  /* 256px */
mb-88margin-bottom: 16rem;  /* 256px */
mx-88margin-left: 16rem;  /* 256px */
margin-right: 16rem;  /* 256px */
my-88margin-block: 16rem;  /* 256px */
m-96margin: 18rem;  /* 288px */
ml-96margin-left: 18rem;  /* 288px */
mr-96margin-right: 18rem;  /* 288px */
mt-96margin-top: 18rem;  /* 288px */
mb-96margin-bottom: 18rem;  /* 288px */
mx-96margin-left: 18rem;  /* 288px */
margin-right: 18rem;  /* 288px */
my-96margin-block: 18rem;  /* 288px */
m-104margin: 20rem;  /* 320px */
ml-104margin-left: 20rem;  /* 320px */
mr-104margin-right: 20rem;  /* 320px */
mt-104margin-top: 20rem;  /* 320px */
mb-104margin-bottom: 20rem;  /* 320px */
mx-104margin-left: 20rem;  /* 320px */
margin-right: 20rem;  /* 320px */
my-104margin-block: 20rem;  /* 320px */
m-112margin: 22rem;  /* 352px */
ml-112margin-left: 22rem;  /* 352px */
mr-112margin-right: 22rem;  /* 352px */
mt-112margin-top: 22rem;  /* 352px */
mb-112margin-bottom: 22rem;  /* 352px */
mx-112margin-left: 22rem;  /* 352px */
margin-right: 22rem;  /* 352px */
my-112margin-block: 22rem;  /* 352px */
m-120margin: 24rem;  /* 384px */
ml-120margin-left: 24rem;  /* 384px */
mr-120margin-right: 24rem;  /* 384px */
mt-120margin-top: 24rem;  /* 384px */
mb-120margin-bottom: 24rem;  /* 384px */
mx-120margin-left: 24rem;  /* 384px */
margin-right: 24rem;  /* 384px */
my-120margin-block: 24rem;  /* 384px */
m-128margin: 26rem;  /* 416px */
ml-128margin-left: 26rem;  /* 416px */
mr-128margin-right: 26rem;  /* 416px */
mt-128margin-top: 26rem;  /* 416px */
mb-128margin-bottom: 26rem;  /* 416px */
mx-128margin-left: 26rem;  /* 416px */
margin-right: 26rem;  /* 416px */
my-128margin-block: 26rem;  /* 416px */
m-136margin: 28rem;  /* 448px */
ml-136margin-left: 28rem;  /* 448px */
mr-136margin-right: 28rem;  /* 448px */
mt-136margin-top: 28rem;  /* 448px */
mb-136margin-bottom: 28rem;  /* 448px */
mx-136margin-left: 28rem;  /* 448px */
margin-right: 28rem;  /* 448px */
my-136margin-block: 28rem;  /* 448px */
m-144margin: 30rem;  /* 480px */
ml-144margin-left: 30rem;  /* 480px */
mr-144margin-right: 30rem;  /* 480px */
mt-144margin-top: 30rem;  /* 480px */
mb-144margin-bottom: 30rem;  /* 480px */
mx-144margin-left: 30rem;  /* 480px */
margin-right: 30rem;  /* 480px */
my-144margin-block: 30rem;  /* 480px */
m-152margin: 32rem;  /* 512px */
ml-152margin-left: 32rem;  /* 512px */
mr-152margin-right: 32rem;  /* 512px */
mt-152margin-top: 32rem;  /* 512px */
mb-152margin-bottom: 32rem;  /* 512px */
mx-152margin-left: 32rem;  /* 512px */
margin-right: 32rem;  /* 512px */
my-152margin-block: 32rem;  /* 512px */

Usage

Use m{arg}-{n} to set the margin for an element of n value.

<div class="flex">
  <div>Box 1</div>
  <div class="ml-12">Box 2</div>
</div>
<!--"ml-12" sets margin left to 2.75rem (_44px_). -->