Skip to main content
Version: 1.1

Margin

Utilities for controlling an element's margin.

NamespaceOutput
m-0{ margin: 0 }
m-1{ margin: 4 }
m-2{ margin: 8 }
m-3{ margin: 12 }
m-4{ margin: 16 }
m-5{ margin: 20 }
m-6{ margin: 24 }
m-7{ margin: 28 }
m-8{ margin: 32 }
m-9{ margin: 36 }
m-10{ margin: 40 }
m-12{ margin: 48 }
m-16{ margin: 64 }
m-20{ margin: 80 }
m-24{ margin: 96 }
m-32{ margin: 128 }
m-40{ margin: 160 }
m-48{ margin: 192 }
m-56{ margin: 224 }
m-64{ margin: 256 }
m-px{ margin: 2 }
my-0{ marginTop: 0, marginBottom: 0 }
my-1{ marginTop: 4 , marginBottom: 4 }
my-2{ marginTop: 8 , marginBottom: 8 }
my-3{ marginTop: 12, marginBottom: 12 }
my-4{ marginTop: 16, marginBottom: 16 }
my-5{ marginTop: 20, marginBottom: 20 }
my-6{ marginTop: 24, marginBottom: 24 }
my-7{ marginTop: 28, marginBottom: 28 }
my-8{ marginTop: 32, marginBottom: 32 }
my-9{ marginTop: 36, marginBottom: 36 }
my-10{ marginTop: 40, marginBottom: 40 }
my-12{ marginTop: 48, marginBottom: 48 }
my-16{ marginTop: 64, marginBottom: 64 }
my-20{ marginTop: 80, marginBottom: 80 }
my-24{ marginTop: 96, marginBottom: 96 }
my-32{ marginTop: 12, marginBottom: 128 }
my-40{ marginTop: 16, marginBottom: 160 }
my-48{ marginTop: 19, marginBottom: 192 }
my-56{ marginTop: 22, marginBottom: 224 }
my-64{ marginTop: 25, marginBottom: 256 }
my-px{ marginTop: 2, marginBottom: 2}
mx-0{ marginRight: 0, marginLeft: 0 }
mx-1{ marginRight: 4 , marginLeft: 4 }
mx-2{ marginRight: 8 , marginLeft: 8 }
mx-3{ marginRight: 12, marginLeft: 12 }
mx-4{ marginRight: 16, marginLeft: 16 }
mx-5{ marginRight: 20, marginLeft: 20 }
mx-6{ marginRight: 24, marginLeft: 24 }
mx-7{ marginRight: 28, marginLeft: 28 }
mx-8{ marginRight: 32, marginLeft: 32 }
mx-9{ marginRight: 36, marginLeft: 36 }
mx-10{ marginRight: 40, marginLeft: 40 }
mx-12{ marginRight: 48, marginLeft: 48 }
mx-16{ marginRight: 64, marginLeft: 64 }
mx-20{ marginRight: 80, marginLeft: 80 }
mx-24{ marginRight: 96, marginLeft: 96 }
mx-32{ marginRight: 12, marginLeft: 128 }
mx-40{ marginRight: 16, marginLeft: 160 }
mx-48{ marginRight: 19, marginLeft: 192 }
mx-56{ marginRight: 22, marginLeft: 224 }
mx-64{ marginRight: 25, marginLeft: 256 }
mx-px{ marginRight: 2, marginLeft: 2 }
mt-0{ marginTop: 0 }
mt-1{ marginTop: 4 }
mt-2{ marginTop: 8 }
mt-3{ marginTop: 12 }
mt-4{ marginTop: 16 }
mt-5{ marginTop: 20 }
mt-6{ marginTop: 24 }
mt-7{ marginTop: 28 }
mt-8{ marginTop: 32 }
mt-9{ marginTop: 36 }
mt-10{ marginTop: 40 }
mt-12{ marginTop: 48 }
mt-16{ marginTop: 64 }
mt-20{ marginTop: 80 }
mt-24{ marginTop: 96 }
mt-32{ marginTop: 128 }
mt-40{ marginTop: 160 }
mt-48{ marginTop: 192 }
mt-56{ marginTop: 224 }
mt-64{ marginTop: 256 }
mt-px{ marginTop: 2 }
mr-0{ marginRight: 0 }
mr-1{ marginRight: 4 }
mr-2{ marginRight: 8 }
mr-3{ marginRight: 12 }
mr-4{ marginRight: 16 }
mr-5{ marginRight: 20 }
mr-6{ marginRight: 24 }
mr-7{ marginRight: 28 }
mr-8{ marginRight: 32 }
mr-9{ marginRight: 36 }
mr-10{ marginRight: 40 }
mr-12{ marginRight: 48 }
mr-16{ marginRight: 64 }
mr-20{ marginRight: 80 }
mr-24{ marginRight: 96 }
mr-32{ marginRight: 128 }
mr-40{ marginRight: 160 }
mr-48{ marginRight: 192 }
mr-56{ marginRight: 224 }
mr-64{ marginRight: 256 }
mr-px{ marginRight: 2 }
mb-0{ marginBottom: 0 }
mb-1{ marginBottom: 4 }
mb-2{ marginBottom: 8 }
mb-3{ marginBottom: 12 }
mb-4{ marginBottom: 16 }
mb-5{ marginBottom: 20 }
mb-6{ marginBottom: 24 }
mb-7{ marginBottom: 28 }
mb-8{ marginBottom: 32 }
mb-9{ marginBottom: 36 }
mb-10{ marginBottom: 40 }
mb-12{ marginBottom: 48 }
mb-16{ marginBottom: 64 }
mb-20{ marginBottom: 80 }
mb-24{ marginBottom: 96 }
mb-32{ marginBottom: 128 }
mb-40{ marginBottom: 160 }
mb-48{ marginBottom: 192 }
mb-56{ marginBottom: 224 }
mb-64{ marginBottom: 256 }
mb-px{ marginBottom: 2 }
ml-0{ marginLeft: 0 }
ml-1{ marginLeft: 4 }
ml-2{ marginLeft: 8 }
ml-3{ marginLeft: 12 }
ml-4{ marginLeft: 16 }
ml-5{ marginLeft: 20 }
ml-6{ marginLeft: 24 }
ml-7{ marginLeft: 28 }
ml-8{ marginLeft: 32 }
ml-9{ marginLeft: 36 }
ml-10{ marginLeft: 40 }
ml-12{ marginLeft: 48 }
ml-16{ marginLeft: 64 }
ml-20{ marginLeft: 80 }
ml-24{ marginLeft: 96 }
ml-32{ marginLeft: 128 }
ml-40{ marginLeft: 160 }
ml-48{ marginLeft: 192 }
ml-56{ marginLeft: 224 }
ml-64{ marginLeft: 256 }
ml-px{ marginLeft: 2 }
m-auto{ margin: "auto" }
my-auto{ marginTop: "auto", marginBottom: "auto" }
mx-auto{ marginTop: "auto", marginBottom: "auto" }
mt-auto{ marginTop: "auto" }
mr-auto{ marginRight: "auto" }
mb-auto{ marginBottom: "auto" }
ml-auto{ marginLeft: "auto" }
-m-1{ margin: -4 }
-m-2{ margin: -8 }
-m-3{ margin: -12 }
-m-4{ margin: -16 }
-m-5{ margin: -20 }
-m-6{ margin: -24 }
-m-7{ margin: -28 }
-m-8{ margin: -32 }
-m-9{ margin: -36 }
-m-10{ margin: -40 }
-m-12{ margin: -48 }
-m-16{ margin: -64 }
-m-20{ margin: -80 }
-m-24{ margin: -96 }
-m-32{ margin: -128 }
-m-40{ margin: -160 }
-m-48{ margin: -192 }
-m-56{ margin: -224 }
-m-64{ margin: -256 }
-m-px{ margin: -2 }
-my-1{ marginTop: -4 , marginBottom: -4 }
-my-2{ marginTop: -8 , marginBottom: -8 }
-my-3{ marginTop: -12, marginBottom: -12 }
-my-4{ marginTop: -16, marginBottom: -16 }
-my-5{ marginTop: -20, marginBottom: -20 }
-my-6{ marginTop: -24, marginBottom: -24 }
-my-7{ marginTop: -28, marginBottom: -28 }
-my-8{ marginTop: -32, marginBottom: -32 }
-my-9{ marginTop: -36, marginBottom: -36 }
-my-10{ marginTop: -40, marginBottom: -40 }
-my-12{ marginTop: -48, marginBottom: -48 }
-my-16{ marginTop: -64, marginBottom: -64 }
-my-20{ marginTop: -80, marginBottom: -80 }
-my-24{ marginTop: -96, marginBottom: -96 }
-my-32{ marginTop: -12, marginBottom: -128 }
-my-40{ marginTop: -16, marginBottom: -160 }
-my-48{ marginTop: -19, marginBottom: -192 }
-my-56{ marginTop: -22, marginBottom: -224 }
-my-64{ marginTop: -25, marginBottom: -256 }
-my-px{ marginTop: -2, marginBottom: -2}
-mx-1{ marginRight: -4 , marginLeft: -4 }
-mx-2{ marginRight: -8 , marginLeft: -8 }
-mx-3{ marginRight: -12, marginLeft: -12 }
-mx-4{ marginRight: -16, marginLeft: -16 }
-mx-5{ marginRight: -20, marginLeft: -20 }
-mx-6{ marginRight: -24, marginLeft: -24 }
-mx-7{ marginRight: -28, marginLeft: -28 }
-mx-8{ marginRight: -32, marginLeft: -32 }
-mx-9{ marginRight: -36, marginLeft: -36 }
-mx-10{ marginRight: -40, marginLeft: -40 }
-mx-12{ marginRight: -48, marginLeft: -48 }
-mx-16{ marginRight: -64, marginLeft: -64 }
-mx-20{ marginRight: -80, marginLeft: -80 }
-mx-24{ marginRight: -96, marginLeft: -96 }
-mx-32{ marginRight: -12, marginLeft: -128 }
-mx-40{ marginRight: -16, marginLeft: -160 }
-mx-48{ marginRight: -19, marginLeft: -192 }
-mx-56{ marginRight: -22, marginLeft: -224 }
-mx-64{ marginRight: -25, marginLeft: -256 }
-mx-px{ marginRight: -2, marginLeft: -2 }
-mt-1{ marginTop: -4 }
-mt-2{ marginTop: -8 }
-mt-3{ marginTop: -12 }
-mt-4{ marginTop: -16 }
-mt-5{ marginTop: -20 }
-mt-6{ marginTop: -24 }
-mt-7{ marginTop: -28 }
-mt-8{ marginTop: -32 }
-mt-9{ marginTop: -36 }
-mt-10{ marginTop: -40 }
-mt-12{ marginTop: -48 }
-mt-16{ marginTop: -64 }
-mt-20{ marginTop: -80 }
-mt-24{ marginTop: -96 }
-mt-32{ marginTop: -128 }
-mt-40{ marginTop: -160 }
-mt-48{ marginTop: -192 }
-mt-56{ marginTop: -224 }
-mt-64{ marginTop: -256 }
-mt-px{ marginTop: -2 }
-mr-1{ marginRight: -4 }
-mr-2{ marginRight: -8 }
-mr-3{ marginRight: -12 }
-mr-4{ marginRight: -16 }
-mr-5{ marginRight: -20 }
-mr-6{ marginRight: -24 }
-mr-7{ marginRight: -28 }
-mr-8{ marginRight: -32 }
-mr-9{ marginRight: -36 }
-mr-10{ marginRight: -40 }
-mr-12{ marginRight: -48 }
-mr-16{ marginRight: -64 }
-mr-20{ marginRight: -80 }
-mr-24{ marginRight: -96 }
-mr-32{ marginRight: -128 }
-mr-40{ marginRight: -160 }
-mr-48{ marginRight: -192 }
-mr-56{ marginRight: -224 }
-mr-64{ marginRight: -256 }
-mr-px{ marginRight: -2 }
-mb-1{ marginBottom: -4 }
-mb-2{ marginBottom: -8 }
-mb-3{ marginBottom: -12 }
-mb-4{ marginBottom: -16 }
-mb-5{ marginBottom: -20 }
-mb-6{ marginBottom: -24 }
-mb-7{ marginBottom: -28 }
-mb-8{ marginBottom: -32 }
-mb-9{ marginBottom: -36 }
-mb-10{ marginBottom: -40 }
-mb-12{ marginBottom: -48 }
-mb-16{ marginBottom: -64 }
-mb-20{ marginBottom: -80 }
-mb-24{ marginBottom: -96 }
-mb-32{ marginBottom: -128 }
-mb-40{ marginBottom: -160 }
-mb-48{ marginBottom: -192 }
-mb-56{ marginBottom: -224 }
-mb-64{ marginBottom: -256 }
-mb-px{ marginBottom: -2 }
-ml-1{ marginLeft: -4 }
-ml-2{ marginLeft: -8 }
-ml-3{ marginLeft: -12 }
-ml-4{ marginLeft: -16 }
-ml-5{ marginLeft: -20 }
-ml-6{ marginLeft: -24 }
-ml-7{ marginLeft: -28 }
-ml-8{ marginLeft: -32 }
-ml-9{ marginLeft: -36 }
-ml-10{ marginLeft: -40 }
-ml-12{ marginLeft: -48 }
-ml-16{ marginLeft: -64 }
-ml-20{ marginLeft: -80 }
-ml-24{ marginLeft: -96 }
-ml-32{ marginLeft: -128 }
-ml-40{ marginLeft: -160 }
-ml-48{ marginLeft: -192 }
-ml-56{ marginLeft: -224 }
-ml-64{ marginLeft: -256 }
-ml-px{ marginLeft: -2 }