Space between

Utilities for controlling the space between child elements


Class reference

ClassProperties
space-y-0> * + *--tw-space-y-reverse: 0; margin-top: calc(0 * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0 * var(--tw-space-y-reverse));
space-y-px> * + *--tw-space-y-reverse: 0; margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1px * var(--tw-space-y-reverse));
space-y-0.5> * + *--tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
space-y-1> * + *--tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
space-y-1.5> * + *--tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
space-y-2> * + *--tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
space-y-2.5> * + *--tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
space-y-3> * + *--tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
space-y-3.5> * + *--tw-space-y-reverse: 0; margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
space-y-4> * + *--tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse));
space-y-4.5> * + *--tw-space-y-reverse: 0; margin-top: calc(1.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.125rem * var(--tw-space-y-reverse));
space-y-5> * + *--tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
space-y-6> * + *--tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
space-y-7> * + *--tw-space-y-reverse: 0; margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
space-y-8> * + *--tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse));
space-y-9> * + *--tw-space-y-reverse: 0; margin-top: calc(2.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.25rem * var(--tw-space-y-reverse));
space-y-10> * + *--tw-space-y-reverse: 0; margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
space-y-11> * + *--tw-space-y-reverse: 0; margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
space-y-12> * + *--tw-space-y-reverse: 0; margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3rem * var(--tw-space-y-reverse));
space-y-13> * + *--tw-space-y-reverse: 0; margin-top: calc(3.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3.25rem * var(--tw-space-y-reverse));
space-y-14> * + *--tw-space-y-reverse: 0; margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
space-y-15> * + *--tw-space-y-reverse: 0; margin-top: calc(3.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3.75rem * var(--tw-space-y-reverse));
space-y-16> * + *--tw-space-y-reverse: 0; margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(4rem * var(--tw-space-y-reverse));
space-y-18> * + *--tw-space-y-reverse: 0; margin-top: calc(4.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(4.5rem * var(--tw-space-y-reverse));
space-y-20> * + *--tw-space-y-reverse: 0; margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(5rem * var(--tw-space-y-reverse));
space-y-24> * + *--tw-space-y-reverse: 0; margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(6rem * var(--tw-space-y-reverse));
space-y-28> * + *--tw-space-y-reverse: 0; margin-top: calc(7rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(7rem * var(--tw-space-y-reverse));
space-y-32> * + *--tw-space-y-reverse: 0; margin-top: calc(8rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(8rem * var(--tw-space-y-reverse));
space-y-36> * + *--tw-space-y-reverse: 0; margin-top: calc(9rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(9rem * var(--tw-space-y-reverse));
space-y-40> * + *--tw-space-y-reverse: 0; margin-top: calc(10rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(10rem * var(--tw-space-y-reverse));
space-y-48> * + *--tw-space-y-reverse: 0; margin-top: calc(12rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(12rem * var(--tw-space-y-reverse));
space-y-56> * + *--tw-space-y-reverse: 0; margin-top: calc(14rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(14rem * var(--tw-space-y-reverse));
space-y-60> * + *--tw-space-y-reverse: 0; margin-top: calc(15rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(15rem * var(--tw-space-y-reverse));
space-y-64> * + *--tw-space-y-reverse: 0; margin-top: calc(16rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(16rem * var(--tw-space-y-reverse));
space-y-72> * + *--tw-space-y-reverse: 0; margin-top: calc(18rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(18rem * var(--tw-space-y-reverse));
space-y-80> * + *--tw-space-y-reverse: 0; margin-top: calc(20rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(20rem * var(--tw-space-y-reverse));
space-y-96> * + *--tw-space-y-reverse: 0; margin-top: calc(24rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(24rem * var(--tw-space-y-reverse));
space-y-reverse> * + *--tw-space-y-reverse: 1;
space-x-0> * + *--tw-space-x-reverse: 0; margin-top: calc(0 * var(--tw-space-x-reverse)); margin-bottom: calc(0 * calc(1 - var(--tw-space-x-reverse)));
space-x-px> * + *--tw-space-x-reverse: 0; margin-top: calc(1px * var(--tw-space-x-reverse)); margin-bottom: calc(1px * calc(1 - var(--tw-space-x-reverse)));
space-x-0.5> * + *--tw-space-x-reverse: 0; margin-top: calc(0.125rem * var(--tw-space-x-reverse)); margin-bottom: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
space-x-1> * + *--tw-space-x-reverse: 0; margin-top: calc(0.25rem * var(--tw-space-x-reverse)); margin-bottom: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-1.5> * + *--tw-space-x-reverse: 0; margin-top: calc(0.375rem * var(--tw-space-x-reverse)); margin-bottom: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
space-x-2> * + *--tw-space-x-reverse: 0; margin-top: calc(0.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-2.5> * + *--tw-space-x-reverse: 0; margin-top: calc(0.625rem * var(--tw-space-x-reverse)); margin-bottom: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
space-x-3> * + *--tw-space-x-reverse: 0; margin-top: calc(0.75rem * var(--tw-space-x-reverse)); margin-bottom: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-3.5> * + *--tw-space-x-reverse: 0; margin-top: calc(0.875rem * var(--tw-space-x-reverse)); margin-bottom: calc(0.875rem * calc(1 - var(--tw-space-x-reverse)));
space-x-4> * + *--tw-space-x-reverse: 0; margin-top: calc(1rem * var(--tw-space-x-reverse)); margin-bottom: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
space-x-4.5> * + *--tw-space-x-reverse: 0; margin-top: calc(1.125rem * var(--tw-space-x-reverse)); margin-bottom: calc(1.125rem * calc(1 - var(--tw-space-x-reverse)));
space-x-5> * + *--tw-space-x-reverse: 0; margin-top: calc(1.25rem * var(--tw-space-x-reverse)); margin-bottom: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-6> * + *--tw-space-x-reverse: 0; margin-top: calc(1.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-7> * + *--tw-space-x-reverse: 0; margin-top: calc(1.75rem * var(--tw-space-x-reverse)); margin-bottom: calc(1.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-8> * + *--tw-space-x-reverse: 0; margin-top: calc(2rem * var(--tw-space-x-reverse)); margin-bottom: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
space-x-9> * + *--tw-space-x-reverse: 0; margin-top: calc(2.25rem * var(--tw-space-x-reverse)); margin-bottom: calc(2.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-10> * + *--tw-space-x-reverse: 0; margin-top: calc(2.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-11> * + *--tw-space-x-reverse: 0; margin-top: calc(2.75rem * var(--tw-space-x-reverse)); margin-bottom: calc(2.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-12> * + *--tw-space-x-reverse: 0; margin-top: calc(3rem * var(--tw-space-x-reverse)); margin-bottom: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
space-x-13> * + *--tw-space-x-reverse: 0; margin-top: calc(3.25rem * var(--tw-space-x-reverse)); margin-bottom: calc(3.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-14> * + *--tw-space-x-reverse: 0; margin-top: calc(3.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(3.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-15> * + *--tw-space-x-reverse: 0; margin-top: calc(3.75rem * var(--tw-space-x-reverse)); margin-bottom: calc(3.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-16> * + *--tw-space-x-reverse: 0; margin-top: calc(4rem * var(--tw-space-x-reverse)); margin-bottom: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
space-x-18> * + *--tw-space-x-reverse: 0; margin-top: calc(4.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(4.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-20> * + *--tw-space-x-reverse: 0; margin-top: calc(5rem * var(--tw-space-x-reverse)); margin-bottom: calc(5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-24> * + *--tw-space-x-reverse: 0; margin-top: calc(6rem * var(--tw-space-x-reverse)); margin-bottom: calc(6rem * calc(1 - var(--tw-space-x-reverse)));
space-x-28> * + *--tw-space-x-reverse: 0; margin-top: calc(7rem * var(--tw-space-x-reverse)); margin-bottom: calc(7rem * calc(1 - var(--tw-space-x-reverse)));
space-x-32> * + *--tw-space-x-reverse: 0; margin-top: calc(8rem * var(--tw-space-x-reverse)); margin-bottom: calc(8rem * calc(1 - var(--tw-space-x-reverse)));
space-x-36> * + *--tw-space-x-reverse: 0; margin-top: calc(9rem * var(--tw-space-x-reverse)); margin-bottom: calc(9rem * calc(1 - var(--tw-space-x-reverse)));
space-x-40> * + *--tw-space-x-reverse: 0; margin-top: calc(10rem * var(--tw-space-x-reverse)); margin-bottom: calc(10rem * calc(1 - var(--tw-space-x-reverse)));
space-x-48> * + *--tw-space-x-reverse: 0; margin-top: calc(12rem * var(--tw-space-x-reverse)); margin-bottom: calc(12rem * calc(1 - var(--tw-space-x-reverse)));
space-x-56> * + *--tw-space-x-reverse: 0; margin-top: calc(14rem * var(--tw-space-x-reverse)); margin-bottom: calc(14rem * calc(1 - var(--tw-space-x-reverse)));
space-x-60> * + *--tw-space-x-reverse: 0; margin-top: calc(15rem * var(--tw-space-x-reverse)); margin-bottom: calc(15rem * calc(1 - var(--tw-space-x-reverse)));
space-x-64> * + *--tw-space-x-reverse: 0; margin-top: calc(16rem * var(--tw-space-x-reverse)); margin-bottom: calc(16rem * calc(1 - var(--tw-space-x-reverse)));
space-x-72> * + *--tw-space-x-reverse: 0; margin-top: calc(18rem * var(--tw-space-x-reverse)); margin-bottom: calc(18rem * calc(1 - var(--tw-space-x-reverse)));
space-x-80> * + *--tw-space-x-reverse: 0; margin-top: calc(20rem * var(--tw-space-x-reverse)); margin-bottom: calc(20rem * calc(1 - var(--tw-space-x-reverse)));
space-x-96> * + *--tw-space-x-reverse: 0; margin-top: calc(24rem * var(--tw-space-x-reverse)); margin-bottom: calc(24rem * calc(1 - var(--tw-space-x-reverse)));
space-x-reverse> * + *--tw-space-x-reverse: 1;
-space-y-px> * + *--tw-space-y-reverse: 0; margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1px * var(--tw-space-y-reverse));
-space-y-0.5> * + *--tw-space-y-reverse: 0; margin-top: calc(-0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.125rem * var(--tw-space-y-reverse));
-space-y-1> * + *--tw-space-y-reverse: 0; margin-top: calc(-0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.25rem * var(--tw-space-y-reverse));
-space-y-1.5> * + *--tw-space-y-reverse: 0; margin-top: calc(-0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.375rem * var(--tw-space-y-reverse));
-space-y-2> * + *--tw-space-y-reverse: 0; margin-top: calc(-0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.5rem * var(--tw-space-y-reverse));
-space-y-2.5> * + *--tw-space-y-reverse: 0; margin-top: calc(-0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.625rem * var(--tw-space-y-reverse));
-space-y-3> * + *--tw-space-y-reverse: 0; margin-top: calc(-0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.75rem * var(--tw-space-y-reverse));
-space-y-3.5> * + *--tw-space-y-reverse: 0; margin-top: calc(-0.875rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-0.875rem * var(--tw-space-y-reverse));
-space-y-4> * + *--tw-space-y-reverse: 0; margin-top: calc(-1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1rem * var(--tw-space-y-reverse));
-space-y-4.5> * + *--tw-space-y-reverse: 0; margin-top: calc(-1.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1.125rem * var(--tw-space-y-reverse));
-space-y-5> * + *--tw-space-y-reverse: 0; margin-top: calc(-1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1.25rem * var(--tw-space-y-reverse));
-space-y-6> * + *--tw-space-y-reverse: 0; margin-top: calc(-1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1.5rem * var(--tw-space-y-reverse));
-space-y-7> * + *--tw-space-y-reverse: 0; margin-top: calc(-1.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-1.75rem * var(--tw-space-y-reverse));
-space-y-8> * + *--tw-space-y-reverse: 0; margin-top: calc(-2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-2rem * var(--tw-space-y-reverse));
-space-y-9> * + *--tw-space-y-reverse: 0; margin-top: calc(-2.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-2.25rem * var(--tw-space-y-reverse));
-space-y-10> * + *--tw-space-y-reverse: 0; margin-top: calc(-2.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-2.5rem * var(--tw-space-y-reverse));
-space-y-11> * + *--tw-space-y-reverse: 0; margin-top: calc(-2.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-2.75rem * var(--tw-space-y-reverse));
-space-y-12> * + *--tw-space-y-reverse: 0; margin-top: calc(-3rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-3rem * var(--tw-space-y-reverse));
-space-y-13> * + *--tw-space-y-reverse: 0; margin-top: calc(-3.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-3.25rem * var(--tw-space-y-reverse));
-space-y-14> * + *--tw-space-y-reverse: 0; margin-top: calc(-3.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-3.5rem * var(--tw-space-y-reverse));
-space-y-15> * + *--tw-space-y-reverse: 0; margin-top: calc(-3.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-3.75rem * var(--tw-space-y-reverse));
-space-y-16> * + *--tw-space-y-reverse: 0; margin-top: calc(-4rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-4rem * var(--tw-space-y-reverse));
-space-y-18> * + *--tw-space-y-reverse: 0; margin-top: calc(-4.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-4.5rem * var(--tw-space-y-reverse));
-space-y-20> * + *--tw-space-y-reverse: 0; margin-top: calc(-5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-5rem * var(--tw-space-y-reverse));
-space-y-24> * + *--tw-space-y-reverse: 0; margin-top: calc(-6rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-6rem * var(--tw-space-y-reverse));
-space-y-28> * + *--tw-space-y-reverse: 0; margin-top: calc(-7rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-7rem * var(--tw-space-y-reverse));
-space-y-32> * + *--tw-space-y-reverse: 0; margin-top: calc(-8rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-8rem * var(--tw-space-y-reverse));
-space-y-36> * + *--tw-space-y-reverse: 0; margin-top: calc(-9rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-9rem * var(--tw-space-y-reverse));
-space-y-40> * + *--tw-space-y-reverse: 0; margin-top: calc(-10rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-10rem * var(--tw-space-y-reverse));
-space-y-48> * + *--tw-space-y-reverse: 0; margin-top: calc(-12rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-12rem * var(--tw-space-y-reverse));
-space-y-56> * + *--tw-space-y-reverse: 0; margin-top: calc(-14rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-14rem * var(--tw-space-y-reverse));
-space-y-60> * + *--tw-space-y-reverse: 0; margin-top: calc(-15rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-15rem * var(--tw-space-y-reverse));
-space-y-64> * + *--tw-space-y-reverse: 0; margin-top: calc(-16rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-16rem * var(--tw-space-y-reverse));
-space-y-72> * + *--tw-space-y-reverse: 0; margin-top: calc(-18rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-18rem * var(--tw-space-y-reverse));
-space-y-80> * + *--tw-space-y-reverse: 0; margin-top: calc(-20rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-20rem * var(--tw-space-y-reverse));
-space-y-96> * + *--tw-space-y-reverse: 0; margin-top: calc(-24rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(-24rem * var(--tw-space-y-reverse));
-space-x-px> * + *--tw-space-x-reverse: 0; margin-top: calc(-1px * var(--tw-space-x-reverse)); margin-bottom: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
-space-x-0.5> * + *--tw-space-x-reverse: 0; margin-top: calc(-0.125rem * var(--tw-space-x-reverse)); margin-bottom: calc(-0.125rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-1> * + *--tw-space-x-reverse: 0; margin-top: calc(-0.25rem * var(--tw-space-x-reverse)); margin-bottom: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-1.5> * + *--tw-space-x-reverse: 0; margin-top: calc(-0.375rem * var(--tw-space-x-reverse)); margin-bottom: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-2> * + *--tw-space-x-reverse: 0; margin-top: calc(-0.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-2.5> * + *--tw-space-x-reverse: 0; margin-top: calc(-0.625rem * var(--tw-space-x-reverse)); margin-bottom: calc(-0.625rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-3> * + *--tw-space-x-reverse: 0; margin-top: calc(-0.75rem * var(--tw-space-x-reverse)); margin-bottom: calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-3.5> * + *--tw-space-x-reverse: 0; margin-top: calc(-0.875rem * var(--tw-space-x-reverse)); margin-bottom: calc(-0.875rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-4> * + *--tw-space-x-reverse: 0; margin-top: calc(-1rem * var(--tw-space-x-reverse)); margin-bottom: calc(-1rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-4.5> * + *--tw-space-x-reverse: 0; margin-top: calc(-1.125rem * var(--tw-space-x-reverse)); margin-bottom: calc(-1.125rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-5> * + *--tw-space-x-reverse: 0; margin-top: calc(-1.25rem * var(--tw-space-x-reverse)); margin-bottom: calc(-1.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-6> * + *--tw-space-x-reverse: 0; margin-top: calc(-1.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(-1.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-7> * + *--tw-space-x-reverse: 0; margin-top: calc(-1.75rem * var(--tw-space-x-reverse)); margin-bottom: calc(-1.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-8> * + *--tw-space-x-reverse: 0; margin-top: calc(-2rem * var(--tw-space-x-reverse)); margin-bottom: calc(-2rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-9> * + *--tw-space-x-reverse: 0; margin-top: calc(-2.25rem * var(--tw-space-x-reverse)); margin-bottom: calc(-2.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-10> * + *--tw-space-x-reverse: 0; margin-top: calc(-2.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(-2.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-11> * + *--tw-space-x-reverse: 0; margin-top: calc(-2.75rem * var(--tw-space-x-reverse)); margin-bottom: calc(-2.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-12> * + *--tw-space-x-reverse: 0; margin-top: calc(-3rem * var(--tw-space-x-reverse)); margin-bottom: calc(-3rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-13> * + *--tw-space-x-reverse: 0; margin-top: calc(-3.25rem * var(--tw-space-x-reverse)); margin-bottom: calc(-3.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-14> * + *--tw-space-x-reverse: 0; margin-top: calc(-3.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(-3.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-15> * + *--tw-space-x-reverse: 0; margin-top: calc(-3.75rem * var(--tw-space-x-reverse)); margin-bottom: calc(-3.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-16> * + *--tw-space-x-reverse: 0; margin-top: calc(-4rem * var(--tw-space-x-reverse)); margin-bottom: calc(-4rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-18> * + *--tw-space-x-reverse: 0; margin-top: calc(-4.5rem * var(--tw-space-x-reverse)); margin-bottom: calc(-4.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-20> * + *--tw-space-x-reverse: 0; margin-top: calc(-5rem * var(--tw-space-x-reverse)); margin-bottom: calc(-5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-24> * + *--tw-space-x-reverse: 0; margin-top: calc(-6rem * var(--tw-space-x-reverse)); margin-bottom: calc(-6rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-28> * + *--tw-space-x-reverse: 0; margin-top: calc(-7rem * var(--tw-space-x-reverse)); margin-bottom: calc(-7rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-32> * + *--tw-space-x-reverse: 0; margin-top: calc(-8rem * var(--tw-space-x-reverse)); margin-bottom: calc(-8rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-36> * + *--tw-space-x-reverse: 0; margin-top: calc(-9rem * var(--tw-space-x-reverse)); margin-bottom: calc(-9rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-40> * + *--tw-space-x-reverse: 0; margin-top: calc(-10rem * var(--tw-space-x-reverse)); margin-bottom: calc(-10rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-48> * + *--tw-space-x-reverse: 0; margin-top: calc(-12rem * var(--tw-space-x-reverse)); margin-bottom: calc(-12rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-56> * + *--tw-space-x-reverse: 0; margin-top: calc(-14rem * var(--tw-space-x-reverse)); margin-bottom: calc(-14rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-60> * + *--tw-space-x-reverse: 0; margin-top: calc(-15rem * var(--tw-space-x-reverse)); margin-bottom: calc(-15rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-64> * + *--tw-space-x-reverse: 0; margin-top: calc(-16rem * var(--tw-space-x-reverse)); margin-bottom: calc(-16rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-72> * + *--tw-space-x-reverse: 0; margin-top: calc(-18rem * var(--tw-space-x-reverse)); margin-bottom: calc(-18rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-80> * + *--tw-space-x-reverse: 0; margin-top: calc(-20rem * var(--tw-space-x-reverse)); margin-bottom: calc(-20rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-96> * + *--tw-space-x-reverse: 0; margin-top: calc(-24rem * var(--tw-space-x-reverse)); margin-bottom: calc(-24rem * calc(1 - var(--tw-space-x-reverse)));

# Add horizontal space between children

Control the horizontal space between elements using the space-x-{amount} utilities.

1
2
3
<div class="flex space-x-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

# Add vertical space between children

Control the horizontal space between elements using the space-y-{amount} utilities.

1
2
3
<div class="flex space-y-6">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

# Reversing children order

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element.

1
2
3
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

# Responsive

To control the space between elements at a specific breakpoint, add a {screen}: prefix to any existing space utility. For example, adding the class md:space-x-8 to an element would apply the space-x-8 utility at medium screen sizes and above.

<div class="flex space-x-2 **md:space-x-8**">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.