spacing

margin

Utilities for controlling an element's margin.

Overview

These are fluid <sizes>-based utilities.

ClassStyle
m-<size>margin: var(--size-<size>);
my-<size>margin-block: var(--size-<size>);
mx-<size>margin-inline: var(--size-<size>);
mt-<size>margin-top: var(--size-<size>);
mr-<size>margin-right: var(--size-<size>);
mb-<size>margin-bottom: var(--size-<size>);
ml-<size>margin-left: var(--size-<size>);
In Depth
ClassStyle
m-automargin: var(--size-auto);
m-zeromargin: var(--size-zero);
m-3xsmargin: var(--size-3xs);
m-2xsmargin: var(--size-2xs);
m-xsmargin: var(--size-xs);
m-smmargin: var(--size-sm);
m-mdmargin: var(--size-md);
m-mlmargin: var(--size-ml);
m-lgmargin: var(--size-lg);
m-xlmargin: var(--size-xl);
m-2xlmargin: var(--size-2xl);
m-3xlmargin: var(--size-3xl);
m-4xlmargin: var(--size-4xl);
m-5xlmargin: var(--size-5xl);
m-6xlmargin: var(--size-6xl);
m-7xlmargin: var(--size-7xl);
m-8xlmargin: var(--size-8xl);
m-9xlmargin: var(--size-9xl);
m-10xlmargin: var(--size-10xl);
m-maxmargin: var(--size-max);
ClassStyle
my-automargin-block: var(--size-auto);
my-zeromargin-block: var(--size-zero);
my-3xsmargin-block: var(--size-3xs);
my-2xsmargin-block: var(--size-2xs);
my-xsmargin-block: var(--size-xs);
my-smmargin-block: var(--size-sm);
my-mdmargin-block: var(--size-md);
my-mlmargin-block: var(--size-ml);
my-lgmargin-block: var(--size-lg);
my-xlmargin-block: var(--size-xl);
my-2xlmargin-block: var(--size-2xl);
my-3xlmargin-block: var(--size-3xl);
my-4xlmargin-block: var(--size-4xl);
my-5xlmargin-block: var(--size-5xl);
my-6xlmargin-block: var(--size-6xl);
my-7xlmargin-block: var(--size-7xl);
my-8xlmargin-block: var(--size-8xl);
my-9xlmargin-block: var(--size-9xl);
my-10xlmargin-block: var(--size-10xl);
my-maxmargin-block: var(--size-max);
ClassStyle
mx-automargin-inline: var(--size-auto);
mx-zeromargin-inline: var(--size-zero);
mx-3xsmargin-inline: var(--size-3xs);
mx-2xsmargin-inline: var(--size-2xs);
mx-xsmargin-inline: var(--size-xs);
mx-smmargin-inline: var(--size-sm);
mx-mdmargin-inline: var(--size-md);
mx-mlmargin-inline: var(--size-ml);
mx-lgmargin-inline: var(--size-lg);
mx-xlmargin-inline: var(--size-xl);
mx-2xlmargin-inline: var(--size-2xl);
mx-3xlmargin-inline: var(--size-3xl);
mx-4xlmargin-inline: var(--size-4xl);
mx-5xlmargin-inline: var(--size-5xl);
mx-6xlmargin-inline: var(--size-6xl);
mx-7xlmargin-inline: var(--size-7xl);
mx-8xlmargin-inline: var(--size-8xl);
mx-9xlmargin-inline: var(--size-9xl);
mx-10xlmargin-inline: var(--size-10xl);
mx-maxmargin-inline: var(--size-max);
ClassStyle
mt-automargin-top: var(--size-auto);
mt-zeromargin-top: var(--size-zero);
mt-3xsmargin-top: var(--size-3xs);
mt-2xsmargin-top: var(--size-2xs);
mt-xsmargin-top: var(--size-xs);
mt-smmargin-top: var(--size-sm);
mt-mdmargin-top: var(--size-md);
mt-mlmargin-top: var(--size-ml);
mt-lgmargin-top: var(--size-lg);
mt-xlmargin-top: var(--size-xl);
mt-2xlmargin-top: var(--size-2xl);
mt-3xlmargin-top: var(--size-3xl);
mt-4xlmargin-top: var(--size-4xl);
mt-5xlmargin-top: var(--size-5xl);
mt-6xlmargin-top: var(--size-6xl);
mt-7xlmargin-top: var(--size-7xl);
mt-8xlmargin-top: var(--size-8xl);
mt-9xlmargin-top: var(--size-9xl);
mt-10xlmargin-top: var(--size-10xl);
mt-maxmargin-top: var(--size-max);
ClassStyle
mr-automargin-right: var(--size-auto);
mr-zeromargin-right: var(--size-zero);
mr-3xsmargin-right: var(--size-3xs);
mr-2xsmargin-right: var(--size-2xs);
mr-xsmargin-right: var(--size-xs);
mr-smmargin-right: var(--size-sm);
mr-mdmargin-right: var(--size-md);
mr-mlmargin-right: var(--size-ml);
mr-lgmargin-right: var(--size-lg);
mr-xlmargin-right: var(--size-xl);
mr-2xlmargin-right: var(--size-2xl);
mr-3xlmargin-right: var(--size-3xl);
mr-4xlmargin-right: var(--size-4xl);
mr-5xlmargin-right: var(--size-5xl);
mr-6xlmargin-right: var(--size-6xl);
mr-7xlmargin-right: var(--size-7xl);
mr-8xlmargin-right: var(--size-8xl);
mr-9xlmargin-right: var(--size-9xl);
mr-10xlmargin-right: var(--size-10xl);
mr-maxmargin-right: var(--size-max);
ClassStyle
mb-automargin-bottom: var(--size-auto);
mb-zeromargin-bottom: var(--size-zero);
mb-3xsmargin-bottom: var(--size-3xs);
mb-2xsmargin-bottom: var(--size-2xs);
mb-xsmargin-bottom: var(--size-xs);
mb-smmargin-bottom: var(--size-sm);
mb-mdmargin-bottom: var(--size-md);
mb-mlmargin-bottom: var(--size-ml);
mb-lgmargin-bottom: var(--size-lg);
mb-xlmargin-bottom: var(--size-xl);
mb-2xlmargin-bottom: var(--size-2xl);
mb-3xlmargin-bottom: var(--size-3xl);
mb-4xlmargin-bottom: var(--size-4xl);
mb-5xlmargin-bottom: var(--size-5xl);
mb-6xlmargin-bottom: var(--size-6xl);
mb-7xlmargin-bottom: var(--size-7xl);
mb-8xlmargin-bottom: var(--size-8xl);
mb-9xlmargin-bottom: var(--size-9xl);
mb-10xlmargin-bottom: var(--size-10xl);
mb-maxmargin-bottom: var(--size-max);
ClassStyle
ml-automargin-left: var(--size-auto);
ml-zeromargin-left: var(--size-zero);
ml-3xsmargin-left: var(--size-3xs);
ml-2xsmargin-left: var(--size-2xs);
ml-xsmargin-left: var(--size-xs);
ml-smmargin-left: var(--size-sm);
ml-mdmargin-left: var(--size-md);
ml-mlmargin-left: var(--size-ml);
ml-lgmargin-left: var(--size-lg);
ml-xlmargin-left: var(--size-xl);
ml-2xlmargin-left: var(--size-2xl);
ml-3xlmargin-left: var(--size-3xl);
ml-4xlmargin-left: var(--size-4xl);
ml-5xlmargin-left: var(--size-5xl);
ml-6xlmargin-left: var(--size-6xl);
ml-7xlmargin-left: var(--size-7xl);
ml-8xlmargin-left: var(--size-8xl);
ml-9xlmargin-left: var(--size-9xl);
ml-10xlmargin-left: var(--size-10xl);
ml-maxmargin-left: var(--size-max);