/*!markdown

---
title: Margin
---

| Class       | Properties               |
| ----------- | ------------------------ |
| m-px | margin: 0.0625rem |
| m-0 | margin: 0 |
| m-none | margin: 0 |
| m-0\.5 | margin: 0.125rem |
| m-1 | margin: 0.25rem |
| m-1\.5 | margin: 0.375rem |
| m-2 | margin: 0.5rem |
| m-2\.5 | margin: 0.625rem |
| m-3 | margin: 0.75rem |
| m-3\.5 | margin: 0.875rem |
| m-4 | margin: 1rem |
| m-5 | margin: 1.25rem |
| m-6 | margin: 1.5rem |
| m-7 | margin: 1.75rem |
| m-8 | margin: 2rem |
| m-9 | margin: 2.25rem |
| m-10 | margin: 2.5rem |
| m-11 | margin: 2.75rem |
| m-12 | margin: 3rem |
| m-14 | margin: 3.5rem |
| m-16 | margin: 4rem |
| m-18 | margin: 4.5rem |
| m-20 | margin: 5rem |
| m-24 | margin: 6rem |
| m-28 | margin: 7rem |
| m-32 | margin: 8rem |
| m-36 | margin: 9rem |
| m-40 | margin: 10rem |
| m-44 | margin: 11rem |
| m-48 | margin: 12rem |
| m-52 | margin: 13rem |
| m-56 | margin: 14rem |
| m-60 | margin: 15rem |
| m-64 | margin: 16rem |
| m-72 | margin: 18rem |
| m-80 | margin: 20rem |
| m-96 | margin: 24rem |
| m-auto | margin: auto |
| -m-px | margin: -0.0625rem |
| -m-0 | margin: 0 |
| -m-none | margin: 0 |
| -m-0\.5 | margin: -0.125rem |
| -m-1 | margin: -0.25rem |
| -m-1\.5 | margin: -0.375rem |
| -m-2 | margin: -0.5rem |
| -m-2\.5 | margin: -0.625rem |
| -m-3 | margin: -0.75rem |
| -m-3\.5 | margin: -0.875rem |
| -m-4 | margin: -1rem |
| -m-5 | margin: -1.25rem |
| -m-6 | margin: -1.5rem |
| -m-7 | margin: -1.75rem |
| -m-8 | margin: -2rem |
| -m-9 | margin: -2.25rem |
| -m-10 | margin: -2.5rem |
| -m-11 | margin: -2.75rem |
| -m-12 | margin: -3rem |
| -m-14 | margin: -3.5rem |
| -m-16 | margin: -4rem |
| -m-18 | margin: -4.5rem |
| -m-20 | margin: -5rem |
| -m-24 | margin: -6rem |
| -m-28 | margin: -7rem |
| -m-32 | margin: -8rem |
| -m-36 | margin: -9rem |
| -m-40 | margin: -10rem |
| -m-44 | margin: -11rem |
| -m-48 | margin: -12rem |
| -m-52 | margin: -13rem |
| -m-56 | margin: -14rem |
| -m-60 | margin: -15rem |
| -m-64 | margin: -16rem |
| -m-72 | margin: -18rem |
| -m-80 | margin: -20rem |
| -m-96 | margin: -24rem |
| mx-px | margin-left: 0.0625rem; margin-right: 0.0625rem |
| mx-0 | margin-left: 0; margin-right: 0 |
| mx-none | margin-left: 0; margin-right: 0 |
| mx-0\.5 | margin-left: 0.125rem; margin-right: 0.125rem |
| mx-1 | margin-left: 0.25rem; margin-right: 0.25rem |
| mx-1\.5 | margin-left: 0.375rem; margin-right: 0.375rem |
| mx-2 | margin-left: 0.5rem; margin-right: 0.5rem |
| mx-2\.5 | margin-left: 0.625rem; margin-right: 0.625rem |
| mx-3 | margin-left: 0.75rem; margin-right: 0.75rem |
| mx-3\.5 | margin-left: 0.875rem; margin-right: 0.875rem |
| mx-4 | margin-left: 1rem; margin-right: 1rem |
| mx-5 | margin-left: 1.25rem; margin-right: 1.25rem |
| mx-6 | margin-left: 1.5rem; margin-right: 1.5rem |
| mx-7 | margin-left: 1.75rem; margin-right: 1.75rem |
| mx-8 | margin-left: 2rem; margin-right: 2rem |
| mx-9 | margin-left: 2.25rem; margin-right: 2.25rem |
| mx-10 | margin-left: 2.5rem; margin-right: 2.5rem |
| mx-11 | margin-left: 2.75rem; margin-right: 2.75rem |
| mx-12 | margin-left: 3rem; margin-right: 3rem |
| mx-14 | margin-left: 3.5rem; margin-right: 3.5rem |
| mx-16 | margin-left: 4rem; margin-right: 4rem |
| mx-18 | margin-left: 4.5rem; margin-right: 4.5rem |
| mx-20 | margin-left: 5rem; margin-right: 5rem |
| mx-24 | margin-left: 6rem; margin-right: 6rem |
| mx-28 | margin-left: 7rem; margin-right: 7rem |
| mx-32 | margin-left: 8rem; margin-right: 8rem |
| mx-36 | margin-left: 9rem; margin-right: 9rem |
| mx-40 | margin-left: 10rem; margin-right: 10rem |
| mx-44 | margin-left: 11rem; margin-right: 11rem |
| mx-48 | margin-left: 12rem; margin-right: 12rem |
| mx-52 | margin-left: 13rem; margin-right: 13rem |
| mx-56 | margin-left: 14rem; margin-right: 14rem |
| mx-60 | margin-left: 15rem; margin-right: 15rem |
| mx-64 | margin-left: 16rem; margin-right: 16rem |
| mx-72 | margin-left: 18rem; margin-right: 18rem |
| mx-80 | margin-left: 20rem; margin-right: 20rem |
| mx-96 | margin-left: 24rem; margin-right: 24rem |
| mx-auto | margin-left: auto; margin-right: auto |
| -mx-px | margin-left: -0.0625rem; margin-right: -0.0625rem |
| -mx-0 | margin-left: 0; margin-right: 0 |
| -mx-none | margin-left: 0; margin-right: 0 |
| -mx-0\.5 | margin-left: -0.125rem; margin-right: -0.125rem |
| -mx-1 | margin-left: -0.25rem; margin-right: -0.25rem |
| -mx-1\.5 | margin-left: -0.375rem; margin-right: -0.375rem |
| -mx-2 | margin-left: -0.5rem; margin-right: -0.5rem |
| -mx-2\.5 | margin-left: -0.625rem; margin-right: -0.625rem |
| -mx-3 | margin-left: -0.75rem; margin-right: -0.75rem |
| -mx-3\.5 | margin-left: -0.875rem; margin-right: -0.875rem |
| -mx-4 | margin-left: -1rem; margin-right: -1rem |
| -mx-5 | margin-left: -1.25rem; margin-right: -1.25rem |
| -mx-6 | margin-left: -1.5rem; margin-right: -1.5rem |
| -mx-7 | margin-left: -1.75rem; margin-right: -1.75rem |
| -mx-8 | margin-left: -2rem; margin-right: -2rem |
| -mx-9 | margin-left: -2.25rem; margin-right: -2.25rem |
| -mx-10 | margin-left: -2.5rem; margin-right: -2.5rem |
| -mx-11 | margin-left: -2.75rem; margin-right: -2.75rem |
| -mx-12 | margin-left: -3rem; margin-right: -3rem |
| -mx-14 | margin-left: -3.5rem; margin-right: -3.5rem |
| -mx-16 | margin-left: -4rem; margin-right: -4rem |
| -mx-18 | margin-left: -4.5rem; margin-right: -4.5rem |
| -mx-20 | margin-left: -5rem; margin-right: -5rem |
| -mx-24 | margin-left: -6rem; margin-right: -6rem |
| -mx-28 | margin-left: -7rem; margin-right: -7rem |
| -mx-32 | margin-left: -8rem; margin-right: -8rem |
| -mx-36 | margin-left: -9rem; margin-right: -9rem |
| -mx-40 | margin-left: -10rem; margin-right: -10rem |
| -mx-44 | margin-left: -11rem; margin-right: -11rem |
| -mx-48 | margin-left: -12rem; margin-right: -12rem |
| -mx-52 | margin-left: -13rem; margin-right: -13rem |
| -mx-56 | margin-left: -14rem; margin-right: -14rem |
| -mx-60 | margin-left: -15rem; margin-right: -15rem |
| -mx-64 | margin-left: -16rem; margin-right: -16rem |
| -mx-72 | margin-left: -18rem; margin-right: -18rem |
| -mx-80 | margin-left: -20rem; margin-right: -20rem |
| -mx-96 | margin-left: -24rem; margin-right: -24rem |
| my-px | margin-top: 0.0625rem; margin-bottom: 0.0625rem |
| my-0 | margin-top: 0; margin-bottom: 0 |
| my-none | margin-top: 0; margin-bottom: 0 |
| my-0\.5 | margin-top: 0.125rem; margin-bottom: 0.125rem |
| my-1 | margin-top: 0.25rem; margin-bottom: 0.25rem |
| my-1\.5 | margin-top: 0.375rem; margin-bottom: 0.375rem |
| my-2 | margin-top: 0.5rem; margin-bottom: 0.5rem |
| my-2\.5 | margin-top: 0.625rem; margin-bottom: 0.625rem |
| my-3 | margin-top: 0.75rem; margin-bottom: 0.75rem |
| my-3\.5 | margin-top: 0.875rem; margin-bottom: 0.875rem |
| 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-7 | margin-top: 1.75rem; margin-bottom: 1.75rem |
| my-8 | margin-top: 2rem; margin-bottom: 2rem |
| my-9 | margin-top: 2.25rem; margin-bottom: 2.25rem |
| my-10 | margin-top: 2.5rem; margin-bottom: 2.5rem |
| my-11 | margin-top: 2.75rem; margin-bottom: 2.75rem |
| my-12 | margin-top: 3rem; margin-bottom: 3rem |
| my-14 | margin-top: 3.5rem; margin-bottom: 3.5rem |
| my-16 | margin-top: 4rem; margin-bottom: 4rem |
| my-18 | margin-top: 4.5rem; margin-bottom: 4.5rem |
| my-20 | margin-top: 5rem; margin-bottom: 5rem |
| my-24 | margin-top: 6rem; margin-bottom: 6rem |
| my-28 | margin-top: 7rem; margin-bottom: 7rem |
| my-32 | margin-top: 8rem; margin-bottom: 8rem |
| my-36 | margin-top: 9rem; margin-bottom: 9rem |
| my-40 | margin-top: 10rem; margin-bottom: 10rem |
| my-44 | margin-top: 11rem; margin-bottom: 11rem |
| my-48 | margin-top: 12rem; margin-bottom: 12rem |
| my-52 | margin-top: 13rem; margin-bottom: 13rem |
| my-56 | margin-top: 14rem; margin-bottom: 14rem |
| my-60 | margin-top: 15rem; margin-bottom: 15rem |
| my-64 | margin-top: 16rem; margin-bottom: 16rem |
| my-72 | margin-top: 18rem; margin-bottom: 18rem |
| my-80 | margin-top: 20rem; margin-bottom: 20rem |
| my-96 | margin-top: 24rem; margin-bottom: 24rem |
| my-auto | margin-top: auto; margin-bottom: auto |
| -my-px | margin-top: -0.0625rem; margin-bottom: -0.0625rem |
| -my-0 | margin-top: 0; margin-bottom: 0 |
| -my-none | margin-top: 0; margin-bottom: 0 |
| -my-0\.5 | margin-top: -0.125rem; margin-bottom: -0.125rem |
| -my-1 | margin-top: -0.25rem; margin-bottom: -0.25rem |
| -my-1\.5 | margin-top: -0.375rem; margin-bottom: -0.375rem |
| -my-2 | margin-top: -0.5rem; margin-bottom: -0.5rem |
| -my-2\.5 | margin-top: -0.625rem; margin-bottom: -0.625rem |
| -my-3 | margin-top: -0.75rem; margin-bottom: -0.75rem |
| -my-3\.5 | margin-top: -0.875rem; margin-bottom: -0.875rem |
| -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-7 | margin-top: -1.75rem; margin-bottom: -1.75rem |
| -my-8 | margin-top: -2rem; margin-bottom: -2rem |
| -my-9 | margin-top: -2.25rem; margin-bottom: -2.25rem |
| -my-10 | margin-top: -2.5rem; margin-bottom: -2.5rem |
| -my-11 | margin-top: -2.75rem; margin-bottom: -2.75rem |
| -my-12 | margin-top: -3rem; margin-bottom: -3rem |
| -my-14 | margin-top: -3.5rem; margin-bottom: -3.5rem |
| -my-16 | margin-top: -4rem; margin-bottom: -4rem |
| -my-18 | margin-top: -4.5rem; margin-bottom: -4.5rem |
| -my-20 | margin-top: -5rem; margin-bottom: -5rem |
| -my-24 | margin-top: -6rem; margin-bottom: -6rem |
| -my-28 | margin-top: -7rem; margin-bottom: -7rem |
| -my-32 | margin-top: -8rem; margin-bottom: -8rem |
| -my-36 | margin-top: -9rem; margin-bottom: -9rem |
| -my-40 | margin-top: -10rem; margin-bottom: -10rem |
| -my-44 | margin-top: -11rem; margin-bottom: -11rem |
| -my-48 | margin-top: -12rem; margin-bottom: -12rem |
| -my-52 | margin-top: -13rem; margin-bottom: -13rem |
| -my-56 | margin-top: -14rem; margin-bottom: -14rem |
| -my-60 | margin-top: -15rem; margin-bottom: -15rem |
| -my-64 | margin-top: -16rem; margin-bottom: -16rem |
| -my-72 | margin-top: -18rem; margin-bottom: -18rem |
| -my-80 | margin-top: -20rem; margin-bottom: -20rem |
| -my-96 | margin-top: -24rem; margin-bottom: -24rem |
| mt-px | margin-top: 0.0625rem |
| mt-0 | margin-top: 0 |
| mt-none | margin-top: 0 |
| mt-0\.5 | margin-top: 0.125rem |
| mt-1 | margin-top: 0.25rem |
| mt-1\.5 | margin-top: 0.375rem |
| mt-2 | margin-top: 0.5rem |
| mt-2\.5 | margin-top: 0.625rem |
| mt-3 | margin-top: 0.75rem |
| mt-3\.5 | margin-top: 0.875rem |
| mt-4 | margin-top: 1rem |
| mt-5 | margin-top: 1.25rem |
| mt-6 | margin-top: 1.5rem |
| mt-7 | margin-top: 1.75rem |
| mt-8 | margin-top: 2rem |
| mt-9 | margin-top: 2.25rem |
| mt-10 | margin-top: 2.5rem |
| mt-11 | margin-top: 2.75rem |
| mt-12 | margin-top: 3rem |
| mt-14 | margin-top: 3.5rem |
| mt-16 | margin-top: 4rem |
| mt-18 | margin-top: 4.5rem |
| mt-20 | margin-top: 5rem |
| mt-24 | margin-top: 6rem |
| mt-28 | margin-top: 7rem |
| mt-32 | margin-top: 8rem |
| mt-36 | margin-top: 9rem |
| mt-40 | margin-top: 10rem |
| mt-44 | margin-top: 11rem |
| mt-48 | margin-top: 12rem |
| mt-52 | margin-top: 13rem |
| mt-56 | margin-top: 14rem |
| mt-60 | margin-top: 15rem |
| mt-64 | margin-top: 16rem |
| mt-72 | margin-top: 18rem |
| mt-80 | margin-top: 20rem |
| mt-96 | margin-top: 24rem |
| -mt-px | margin-top: -0.0625rem |
| -mt-0 | margin-top: 0 |
| -mt-none | margin-top: 0 |
| -mt-0\.5 | margin-top: -0.125rem |
| -mt-1 | margin-top: -0.25rem |
| -mt-1\.5 | margin-top: -0.375rem |
| -mt-2 | margin-top: -0.5rem |
| -mt-2\.5 | margin-top: -0.625rem |
| -mt-3 | margin-top: -0.75rem |
| -mt-3\.5 | margin-top: -0.875rem |
| -mt-4 | margin-top: -1rem |
| -mt-5 | margin-top: -1.25rem |
| -mt-6 | margin-top: -1.5rem |
| -mt-7 | margin-top: -1.75rem |
| -mt-8 | margin-top: -2rem |
| -mt-9 | margin-top: -2.25rem |
| -mt-10 | margin-top: -2.5rem |
| -mt-11 | margin-top: -2.75rem |
| -mt-12 | margin-top: -3rem |
| -mt-14 | margin-top: -3.5rem |
| -mt-16 | margin-top: -4rem |
| -mt-18 | margin-top: -4.5rem |
| -mt-20 | margin-top: -5rem |
| -mt-24 | margin-top: -6rem |
| -mt-28 | margin-top: -7rem |
| -mt-32 | margin-top: -8rem |
| -mt-36 | margin-top: -9rem |
| -mt-40 | margin-top: -10rem |
| -mt-44 | margin-top: -11rem |
| -mt-48 | margin-top: -12rem |
| -mt-52 | margin-top: -13rem |
| -mt-56 | margin-top: -14rem |
| -mt-60 | margin-top: -15rem |
| -mt-64 | margin-top: -16rem |
| -mt-72 | margin-top: -18rem |
| -mt-80 | margin-top: -20rem |
| -mt-96 | margin-top: -24rem |
| mr-px | margin-right: 0.0625rem |
| mr-0 | margin-right: 0 |
| mr-none | margin-right: 0 |
| mr-0\.5 | margin-right: 0.125rem |
| mr-1 | margin-right: 0.25rem |
| mr-1\.5 | margin-right: 0.375rem |
| mr-2 | margin-right: 0.5rem |
| mr-2\.5 | margin-right: 0.625rem |
| mr-3 | margin-right: 0.75rem |
| mr-3\.5 | margin-right: 0.875rem |
| mr-4 | margin-right: 1rem |
| mr-5 | margin-right: 1.25rem |
| mr-6 | margin-right: 1.5rem |
| mr-7 | margin-right: 1.75rem |
| mr-8 | margin-right: 2rem |
| mr-9 | margin-right: 2.25rem |
| mr-10 | margin-right: 2.5rem |
| mr-11 | margin-right: 2.75rem |
| mr-12 | margin-right: 3rem |
| mr-14 | margin-right: 3.5rem |
| mr-16 | margin-right: 4rem |
| mr-18 | margin-right: 4.5rem |
| mr-20 | margin-right: 5rem |
| mr-24 | margin-right: 6rem |
| mr-28 | margin-right: 7rem |
| mr-32 | margin-right: 8rem |
| mr-36 | margin-right: 9rem |
| mr-40 | margin-right: 10rem |
| mr-44 | margin-right: 11rem |
| mr-48 | margin-right: 12rem |
| mr-52 | margin-right: 13rem |
| mr-56 | margin-right: 14rem |
| mr-60 | margin-right: 15rem |
| mr-64 | margin-right: 16rem |
| mr-72 | margin-right: 18rem |
| mr-80 | margin-right: 20rem |
| mr-96 | margin-right: 24rem |
| -mr-px | margin-right: -0.0625rem |
| -mr-0 | margin-right: 0 |
| -mr-none | margin-right: 0 |
| -mr-0\.5 | margin-right: -0.125rem |
| -mr-1 | margin-right: -0.25rem |
| -mr-1\.5 | margin-right: -0.375rem |
| -mr-2 | margin-right: -0.5rem |
| -mr-2\.5 | margin-right: -0.625rem |
| -mr-3 | margin-right: -0.75rem |
| -mr-3\.5 | margin-right: -0.875rem |
| -mr-4 | margin-right: -1rem |
| -mr-5 | margin-right: -1.25rem |
| -mr-6 | margin-right: -1.5rem |
| -mr-7 | margin-right: -1.75rem |
| -mr-8 | margin-right: -2rem |
| -mr-9 | margin-right: -2.25rem |
| -mr-10 | margin-right: -2.5rem |
| -mr-11 | margin-right: -2.75rem |
| -mr-12 | margin-right: -3rem |
| -mr-14 | margin-right: -3.5rem |
| -mr-16 | margin-right: -4rem |
| -mr-18 | margin-right: -4.5rem |
| -mr-20 | margin-right: -5rem |
| -mr-24 | margin-right: -6rem |
| -mr-28 | margin-right: -7rem |
| -mr-32 | margin-right: -8rem |
| -mr-36 | margin-right: -9rem |
| -mr-40 | margin-right: -10rem |
| -mr-44 | margin-right: -11rem |
| -mr-48 | margin-right: -12rem |
| -mr-52 | margin-right: -13rem |
| -mr-56 | margin-right: -14rem |
| -mr-60 | margin-right: -15rem |
| -mr-64 | margin-right: -16rem |
| -mr-72 | margin-right: -18rem |
| -mr-80 | margin-right: -20rem |
| -mr-96 | margin-right: -24rem |
| mb-px | margin-bottom: 0.0625rem |
| mb-0 | margin-bottom: 0 |
| mb-none | margin-bottom: 0 |
| mb-0\.5 | margin-bottom: 0.125rem |
| mb-1 | margin-bottom: 0.25rem |
| mb-1\.5 | margin-bottom: 0.375rem |
| mb-2 | margin-bottom: 0.5rem |
| mb-2\.5 | margin-bottom: 0.625rem |
| mb-3 | margin-bottom: 0.75rem |
| mb-3\.5 | margin-bottom: 0.875rem |
| mb-4 | margin-bottom: 1rem |
| mb-5 | margin-bottom: 1.25rem |
| mb-6 | margin-bottom: 1.5rem |
| mb-7 | margin-bottom: 1.75rem |
| mb-8 | margin-bottom: 2rem |
| mb-9 | margin-bottom: 2.25rem |
| mb-10 | margin-bottom: 2.5rem |
| mb-11 | margin-bottom: 2.75rem |
| mb-12 | margin-bottom: 3rem |
| mb-14 | margin-bottom: 3.5rem |
| mb-16 | margin-bottom: 4rem |
| mb-18 | margin-bottom: 4.5rem |
| mb-20 | margin-bottom: 5rem |
| mb-24 | margin-bottom: 6rem |
| mb-28 | margin-bottom: 7rem |
| mb-32 | margin-bottom: 8rem |
| mb-36 | margin-bottom: 9rem |
| mb-40 | margin-bottom: 10rem |
| mb-44 | margin-bottom: 11rem |
| mb-48 | margin-bottom: 12rem |
| mb-52 | margin-bottom: 13rem |
| mb-56 | margin-bottom: 14rem |
| mb-60 | margin-bottom: 15rem |
| mb-64 | margin-bottom: 16rem |
| mb-72 | margin-bottom: 18rem |
| mb-80 | margin-bottom: 20rem |
| mb-96 | margin-bottom: 24rem |
| -mb-px | margin-bottom: -0.0625rem |
| -mb-0 | margin-bottom: 0 |
| -mb-none | margin-bottom: 0 |
| -mb-0\.5 | margin-bottom: -0.125rem |
| -mb-1 | margin-bottom: -0.25rem |
| -mb-1\.5 | margin-bottom: -0.375rem |
| -mb-2 | margin-bottom: -0.5rem |
| -mb-2\.5 | margin-bottom: -0.625rem |
| -mb-3 | margin-bottom: -0.75rem |
| -mb-3\.5 | margin-bottom: -0.875rem |
| -mb-4 | margin-bottom: -1rem |
| -mb-5 | margin-bottom: -1.25rem |
| -mb-6 | margin-bottom: -1.5rem |
| -mb-7 | margin-bottom: -1.75rem |
| -mb-8 | margin-bottom: -2rem |
| -mb-9 | margin-bottom: -2.25rem |
| -mb-10 | margin-bottom: -2.5rem |
| -mb-11 | margin-bottom: -2.75rem |
| -mb-12 | margin-bottom: -3rem |
| -mb-14 | margin-bottom: -3.5rem |
| -mb-16 | margin-bottom: -4rem |
| -mb-18 | margin-bottom: -4.5rem |
| -mb-20 | margin-bottom: -5rem |
| -mb-24 | margin-bottom: -6rem |
| -mb-28 | margin-bottom: -7rem |
| -mb-32 | margin-bottom: -8rem |
| -mb-36 | margin-bottom: -9rem |
| -mb-40 | margin-bottom: -10rem |
| -mb-44 | margin-bottom: -11rem |
| -mb-48 | margin-bottom: -12rem |
| -mb-52 | margin-bottom: -13rem |
| -mb-56 | margin-bottom: -14rem |
| -mb-60 | margin-bottom: -15rem |
| -mb-64 | margin-bottom: -16rem |
| -mb-72 | margin-bottom: -18rem |
| -mb-80 | margin-bottom: -20rem |
| -mb-96 | margin-bottom: -24rem |
| ml-px | margin-left: 0.0625rem |
| ml-0 | margin-left: 0 |
| ml-none | margin-left: 0 |
| ml-0\.5 | margin-left: 0.125rem |
| ml-1 | margin-left: 0.25rem |
| ml-1\.5 | margin-left: 0.375rem |
| ml-2 | margin-left: 0.5rem |
| ml-2\.5 | margin-left: 0.625rem |
| ml-3 | margin-left: 0.75rem |
| ml-3\.5 | margin-left: 0.875rem |
| ml-4 | margin-left: 1rem |
| ml-5 | margin-left: 1.25rem |
| ml-6 | margin-left: 1.5rem |
| ml-7 | margin-left: 1.75rem |
| ml-8 | margin-left: 2rem |
| ml-9 | margin-left: 2.25rem |
| ml-10 | margin-left: 2.5rem |
| ml-11 | margin-left: 2.75rem |
| ml-12 | margin-left: 3rem |
| ml-14 | margin-left: 3.5rem |
| ml-16 | margin-left: 4rem |
| ml-18 | margin-left: 4.5rem |
| ml-20 | margin-left: 5rem |
| ml-24 | margin-left: 6rem |
| ml-28 | margin-left: 7rem |
| ml-32 | margin-left: 8rem |
| ml-36 | margin-left: 9rem |
| ml-40 | margin-left: 10rem |
| ml-44 | margin-left: 11rem |
| ml-48 | margin-left: 12rem |
| ml-52 | margin-left: 13rem |
| ml-56 | margin-left: 14rem |
| ml-60 | margin-left: 15rem |
| ml-64 | margin-left: 16rem |
| ml-72 | margin-left: 18rem |
| ml-80 | margin-left: 20rem |
| ml-96 | margin-left: 24rem |
| -ml-px | margin-left: -0.0625rem |
| -ml-0 | margin-left: 0 |
| -ml-none | margin-left: 0 |
| -ml-0\.5 | margin-left: -0.125rem |
| -ml-1 | margin-left: -0.25rem |
| -ml-1\.5 | margin-left: -0.375rem |
| -ml-2 | margin-left: -0.5rem |
| -ml-2\.5 | margin-left: -0.625rem |
| -ml-3 | margin-left: -0.75rem |
| -ml-3\.5 | margin-left: -0.875rem |
| -ml-4 | margin-left: -1rem |
| -ml-5 | margin-left: -1.25rem |
| -ml-6 | margin-left: -1.5rem |
| -ml-7 | margin-left: -1.75rem |
| -ml-8 | margin-left: -2rem |
| -ml-9 | margin-left: -2.25rem |
| -ml-10 | margin-left: -2.5rem |
| -ml-11 | margin-left: -2.75rem |
| -ml-12 | margin-left: -3rem |
| -ml-14 | margin-left: -3.5rem |
| -ml-16 | margin-left: -4rem |
| -ml-18 | margin-left: -4.5rem |
| -ml-20 | margin-left: -5rem |
| -ml-24 | margin-left: -6rem |
| -ml-28 | margin-left: -7rem |
| -ml-32 | margin-left: -8rem |
| -ml-36 | margin-left: -9rem |
| -ml-40 | margin-left: -10rem |
| -ml-44 | margin-left: -11rem |
| -ml-48 | margin-left: -12rem |
| -ml-52 | margin-left: -13rem |
| -ml-56 | margin-left: -14rem |
| -ml-60 | margin-left: -15rem |
| -ml-64 | margin-left: -16rem |
| -ml-72 | margin-left: -18rem |
| -ml-80 | margin-left: -20rem |
| -ml-96 | margin-left: -24rem |



*/
@mixin margin-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
  @each $name, $value in $spacing {
    @if $name == default {
      #{$prefix}m#{$suffix} {
        margin: $value;
      }
    } @else {
      #{$prefix}m-#{'' + selector-escape($name)}#{$suffix} {
        margin: $value;
      }
    }
  }
}

@mixin margin-negative-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
  @each $name, $value in $spacing {
    @if (type-of($value) == 'number') {
      @if $name == default {
        #{$prefix}-m#{$suffix} {
          margin: $value * -1;
        }
      } @else {
        #{$prefix}-m-#{'' + selector-escape($name)}#{$suffix} {
          margin: $value * -1;
        }
      }
    }
  }
}

@mixin margin-x-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
  @each $name, $value in $spacing {
    @if $name == default {
      #{$prefix}mx#{$suffix} {
        margin-left: $value;
        margin-right: $value;
      }
    } @else {
      #{$prefix}mx-#{'' + selector-escape($name)}#{$suffix} {
        margin-left: $value;
        margin-right: $value;
      }
    }
  }

  #{$prefix}mx-auto#{$suffix} {
    margin-left: auto;
    margin-right: auto;
  }
}

@mixin margin-negative-x-spacing(
  $spacing: $spacing,
  $prefix: '.',
  $suffix: ''
) {
  @each $name, $value in $spacing {
    @if (type-of($value) == 'number') {
      @if $name == default {
        #{$prefix}-mx#{$suffix} {
          margin-left: $value * -1;
          margin-right: $value * -1;
        }
      } @else {
        #{$prefix}-mx-#{'' + selector-escape($name)}#{$suffix} {
          margin-left: $value * -1;
          margin-right: $value * -1;
        }
      }
    }
  }
}

@mixin margin-y-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
  @each $name, $value in $spacing {
    @if $name == default {
      #{$prefix}my#{$suffix} {
        margin-top: $value;
        margin-bottom: $value;
      }
    } @else {
      #{$prefix}my-#{'' + selector-escape($name)}#{$suffix} {
        margin-top: $value;
        margin-bottom: $value;
      }
    }
  }

  #{$prefix}my-auto#{$suffix} {
    margin-top: auto;
    margin-bottom: auto;
  }
}

@mixin margin-negative-y-spacing(
  $spacing: $spacing,
  $prefix: '.',
  $suffix: ''
) {
  @each $name, $value in $spacing {
    @if (type-of($value) == 'number') {
      @if $name == default {
        #{$prefix}-my#{$suffix} {
          margin-top: $value * -1;
          margin-bottom: $value * -1;
        }
      } @else {
        #{$prefix}-my-#{'' + selector-escape($name)}#{$suffix} {
          margin-top: $value * -1;
          margin-bottom: $value * -1;
        }
      }
    }
  }
}

@mixin margin-top-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
  @each $name, $value in $spacing {
    @if $name == default {
      #{$prefix}mt#{$suffix} {
        margin-top: $value;
      }
    } @else {
      #{$prefix}mt-#{'' + selector-escape($name)}#{$suffix} {
        margin-top: $value;
      }
    }
  }
}

@mixin margin-negative-top-spacing(
  $spacing: $spacing,
  $prefix: '.',
  $suffix: ''
) {
  @each $name, $value in $spacing {
    @if (type-of($value) == 'number') {
      @if $name == default {
        #{$prefix}-mt#{$suffix} {
          margin-top: $value * -1;
        }
      } @else {
        #{$prefix}-mt-#{'' + selector-escape($name)}#{$suffix} {
          margin-top: $value * -1;
        }
      }
    }
  }
}

@mixin margin-right-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
  @each $name, $value in $spacing {
    @if $name == default {
      #{$prefix}mr#{$suffix} {
        margin-right: $value;
      }
    } @else {
      #{$prefix}mr-#{'' + selector-escape($name)}#{$suffix} {
        margin-right: $value;
      }
    }
  }
}

@mixin margin-negative-right-spacing(
  $spacing: $spacing,
  $prefix: '.',
  $suffix: ''
) {
  @each $name, $value in $spacing {
    @if (type-of($value) == 'number') {
      @if $name == default {
        #{$prefix}-mr#{$suffix} {
          margin-right: $value * -1;
        }
      } @else {
        #{$prefix}-mr-#{'' + selector-escape($name)}#{$suffix} {
          margin-right: $value * -1;
        }
      }
    }
  }
}

@mixin margin-bottom-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
  @each $name, $value in $spacing {
    @if $name == default {
      #{$prefix}mb#{$suffix} {
        margin-bottom: $value;
      }
    } @else {
      #{$prefix}mb-#{'' + selector-escape($name)}#{$suffix} {
        margin-bottom: $value;
      }
    }
  }
}

@mixin margin-negative-bottom-spacing(
  $spacing: $spacing,
  $prefix: '.',
  $suffix: ''
) {
  @each $name, $value in $spacing {
    @if (type-of($value) == 'number') {
      @if $name == default {
        #{$prefix}-mb#{$suffix} {
          margin-bottom: $value * -1;
        }
      } @else {
        #{$prefix}-mb-#{'' + selector-escape($name)}#{$suffix} {
          margin-bottom: $value * -1;
        }
      }
    }
  }
}

@mixin margin-left-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
  @each $name, $value in $spacing {
    @if $name == default {
      #{$prefix}ml#{$suffix} {
        margin-left: $value;
      }
    } @else {
      #{$prefix}ml-#{'' + selector-escape($name)}#{$suffix} {
        margin-left: $value;
      }
    }
  }
}

@mixin margin-negative-left-spacing(
  $spacing: $spacing,
  $prefix: '.',
  $suffix: ''
) {
  @each $name, $value in $spacing {
    @if (type-of($value) == 'number') {
      @if $name == default {
        #{$prefix}-ml#{$suffix} {
          margin-left: $value * -1;
        }
      } @else {
        #{$prefix}-ml-#{'' + selector-escape($name)}#{$suffix} {
          margin-left: $value * -1;
        }
      }
    }
  }
}

@mixin make-margins($prefix: '.', $suffix: '') {
  $margins: map-merge(
    $spacing,
    (
      auto: auto
    )
  ) !default;

  @include margin-spacing($margins, $prefix, $suffix);
  @include margin-negative-spacing($margins, $prefix, $suffix);
  @include margin-x-spacing($margins, $prefix, $suffix);
  @include margin-negative-x-spacing($margins, $prefix, $suffix);
  @include margin-y-spacing($margins, $prefix, $suffix);
  @include margin-negative-y-spacing($margins, $prefix, $suffix);
  @include margin-top-spacing($margins, $prefix, $suffix);
  @include margin-negative-top-spacing($margins, $prefix, $suffix);
  @include margin-right-spacing($margins, $prefix, $suffix);
  @include margin-negative-right-spacing($margins, $prefix, $suffix);
  @include margin-bottom-spacing($margins, $prefix, $suffix);
  @include margin-negative-bottom-spacing($margins, $prefix, $suffix);
  @include margin-left-spacing($margins, $prefix, $suffix);
  @include margin-negative-left-spacing($margins, $prefix, $suffix);
}

@include make-margins();
@each $deivce in map-keys($devices) {
  @include media-device($deivce) {
    @include make-margins('.' + selector-escape($deivce + ':'));
  }
}

// @include bg-colors('.' + selector-escape('hover:'), ':hover');
// @include bg-colors('.' + selector-escape('active:'), '.is-active');
// @include bg-colors('.' + selector-escape('focus:'), ':focus');
// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));