Margin

Utilities for controlling an element's margin.

Class reference

Class Properties
.m-0 margin: 0;
.m-1 margin: 0.25rem;
.m-2 margin: 0.5rem;
.m-3 margin: 0.75rem;
.m-4 margin: 1rem;
.m-5 margin: 1.25rem;
.m-6 margin: 1.5rem;
.m-8 margin: 2rem;
.m-10 margin: 2.5rem;
.m-12 margin: 3rem;
.m-16 margin: 4rem;
.m-20 margin: 5rem;
.m-24 margin: 6rem;
.m-32 margin: 8rem;
.m-40 margin: 10rem;
.m-48 margin: 12rem;
.m-56 margin: 14rem;
.m-64 margin: 16rem;
.m-auto margin: auto;
.m-px margin: 1px;
.my-0 margin-top: 0; margin-bottom: 0;
.my-1 margin-top: 0.25rem; margin-bottom: 0.25rem;
.my-2 margin-top: 0.5rem; margin-bottom: 0.5rem;
.my-3 margin-top: 0.75rem; margin-bottom: 0.75rem;
.my-4 margin-top: 1rem; margin-bottom: 1rem;
.my-5 margin-top: 1.25rem; margin-bottom: 1.25rem;
.my-6 margin-top: 1.5rem; margin-bottom: 1.5rem;
.my-8 margin-top: 2rem; margin-bottom: 2rem;
.my-10 margin-top: 2.5rem; margin-bottom: 2.5rem;
.my-12 margin-top: 3rem; margin-bottom: 3rem;
.my-16 margin-top: 4rem; margin-bottom: 4rem;
.my-20 margin-top: 5rem; margin-bottom: 5rem;
.my-24 margin-top: 6rem; margin-bottom: 6rem;
.my-32 margin-top: 8rem; margin-bottom: 8rem;
.my-40 margin-top: 10rem; margin-bottom: 10rem;
.my-48 margin-top: 12rem; margin-bottom: 12rem;
.my-56 margin-top: 14rem; margin-bottom: 14rem;
.my-64 margin-top: 16rem; margin-bottom: 16rem;
.my-auto margin-top: auto; margin-bottom: auto;
.my-px margin-top: 1px; margin-bottom: 1px;
.mx-0 margin-right: 0; margin-left: 0;
.mx-1 margin-right: 0.25rem; margin-left: 0.25rem;
.mx-2 margin-right: 0.5rem; margin-left: 0.5rem;
.mx-3 margin-right: 0.75rem; margin-left: 0.75rem;
.mx-4 margin-right: 1rem; margin-left: 1rem;
.mx-5 margin-right: 1.25rem; margin-left: 1.25rem;
.mx-6 margin-right: 1.5rem; margin-left: 1.5rem;
.mx-8 margin-right: 2rem; margin-left: 2rem;
.mx-10 margin-right: 2.5rem; margin-left: 2.5rem;
.mx-12 margin-right: 3rem; margin-left: 3rem;
.mx-16 margin-right: 4rem; margin-left: 4rem;
.mx-20 margin-right: 5rem; margin-left: 5rem;
.mx-24 margin-right: 6rem; margin-left: 6rem;
.mx-32 margin-right: 8rem; margin-left: 8rem;
.mx-40 margin-right: 10rem; margin-left: 10rem;
.mx-48 margin-right: 12rem; margin-left: 12rem;
.mx-56 margin-right: 14rem; margin-left: 14rem;
.mx-64 margin-right: 16rem; margin-left: 16rem;
.mx-auto margin-right: auto; margin-left: auto;
.mx-px margin-right: 1px; margin-left: 1px;
.mt-0 margin-top: 0;
.mt-1 margin-top: 0.25rem;
.mt-2 margin-top: 0.5rem;
.mt-3 margin-top: 0.75rem;
.mt-4 margin-top: 1rem;
.mt-5 margin-top: 1.25rem;
.mt-6 margin-top: 1.5rem;
.mt-8 margin-top: 2rem;
.mt-10 margin-top: 2.5rem;
.mt-12 margin-top: 3rem;
.mt-16 margin-top: 4rem;
.mt-20 margin-top: 5rem;
.mt-24 margin-top: 6rem;
.mt-32 margin-top: 8rem;
.mt-40 margin-top: 10rem;
.mt-48 margin-top: 12rem;
.mt-56 margin-top: 14rem;
.mt-64 margin-top: 16rem;
.mt-auto margin-top: auto;
.mt-px margin-top: 1px;
.mr-0 margin-right: 0;
.mr-1 margin-right: 0.25rem;
.mr-2 margin-right: 0.5rem;
.mr-3 margin-right: 0.75rem;
.mr-4 margin-right: 1rem;
.mr-5 margin-right: 1.25rem;
.mr-6 margin-right: 1.5rem;
.mr-8 margin-right: 2rem;
.mr-10 margin-right: 2.5rem;
.mr-12 margin-right: 3rem;
.mr-16 margin-right: 4rem;
.mr-20 margin-right: 5rem;
.mr-24 margin-right: 6rem;
.mr-32 margin-right: 8rem;
.mr-40 margin-right: 10rem;
.mr-48 margin-right: 12rem;
.mr-56 margin-right: 14rem;
.mr-64 margin-right: 16rem;
.mr-auto margin-right: auto;
.mr-px margin-right: 1px;
.mb-0 margin-bottom: 0;
.mb-1 margin-bottom: 0.25rem;
.mb-2 margin-bottom: 0.5rem;
.mb-3 margin-bottom: 0.75rem;
.mb-4 margin-bottom: 1rem;
.mb-5 margin-bottom: 1.25rem;
.mb-6 margin-bottom: 1.5rem;
.mb-8 margin-bottom: 2rem;
.mb-10 margin-bottom: 2.5rem;
.mb-12 margin-bottom: 3rem;
.mb-16 margin-bottom: 4rem;
.mb-20 margin-bottom: 5rem;
.mb-24 margin-bottom: 6rem;
.mb-32 margin-bottom: 8rem;
.mb-40 margin-bottom: 10rem;
.mb-48 margin-bottom: 12rem;
.mb-56 margin-bottom: 14rem;
.mb-64 margin-bottom: 16rem;
.mb-auto margin-bottom: auto;
.mb-px margin-bottom: 1px;
.ml-0 margin-left: 0;
.ml-1 margin-left: 0.25rem;
.ml-2 margin-left: 0.5rem;
.ml-3 margin-left: 0.75rem;
.ml-4 margin-left: 1rem;
.ml-5 margin-left: 1.25rem;
.ml-6 margin-left: 1.5rem;
.ml-8 margin-left: 2rem;
.ml-10 margin-left: 2.5rem;
.ml-12 margin-left: 3rem;
.ml-16 margin-left: 4rem;
.ml-20 margin-left: 5rem;
.ml-24 margin-left: 6rem;
.ml-32 margin-left: 8rem;
.ml-40 margin-left: 10rem;
.ml-48 margin-left: 12rem;
.ml-56 margin-left: 14rem;
.ml-64 margin-left: 16rem;
.ml-auto margin-left: auto;
.ml-px margin-left: 1px;

Usage

Control an element's margin using the .m{side?}-{size} utilities.

For example, .m-6 would add 1.5rem of margin on all sides of an element, .mx-0 would make the horizontal margin zero, and .mt-2 would add .5rem of margin to the top of the element.

Responsive

To control the margin of an element at a specific breakpoint, add a {screen}: prefix to any existing background color utility. For example, use md:mx-4 to apply the mx-4 utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

Customizing

Margins

By default Tailwind provides 19 fixed margin utilities and an auto utility. These utilities will also be generated for every side and axis. You change, add, or remove these by editing the theme.margin section of your tailwind.config.js file.

// tailwind.config.js
module.exports = {
theme: {
margin: theme => ({
-     'auto': 'auto',
      ...theme('spacing'),
+     '72': '18rem',
+     '2px': '2px',
})
}
}

Responsive and State Variants

By default, only responsive variants are generated for margin utilities.

You can control which variants are generated for the margin utilities by modifying the margin property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

// tailwind.config.js
module.exports = {
variants: {
    // ...
-   margin: ['responsive'],
+   margin: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the margin utilities in your project, you can disable them entirely by setting the margin property to false in the corePlugins section of your config file:

// tailwind.config.js
module.exports = {
corePlugins: {
    // ...
+   margin: false,
}
}