Margin
Utilities for controlling an element's margin.
| Namespace | Output |
|---|---|
| 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 } |