santycss/dist/santy-spacing.css

Plain-English utility-first CSS framework — no build step, just classes

/* SantyCSS — spacing module
   Import individually to reduce bundle size.
   https://santycss.santy.in */

/* ── Padding ── */
.add-padding-0        { padding: 0px; }
.add-padding-top-0    { padding-top: 0px; }
.add-padding-bottom-0 { padding-bottom: 0px; }
.add-padding-left-0   { padding-left: 0px; }
.add-padding-right-0  { padding-right: 0px; }
.add-padding-x-0      { padding-left: 0px; padding-right: 0px; }
.add-padding-y-0      { padding-top: 0px; padding-bottom: 0px; }
.add-padding-1        { padding: 1px; }
.add-padding-top-1    { padding-top: 1px; }
.add-padding-bottom-1 { padding-bottom: 1px; }
.add-padding-left-1   { padding-left: 1px; }
.add-padding-right-1  { padding-right: 1px; }
.add-padding-x-1      { padding-left: 1px; padding-right: 1px; }
.add-padding-y-1      { padding-top: 1px; padding-bottom: 1px; }
.add-padding-2        { padding: 2px; }
.add-padding-top-2    { padding-top: 2px; }
.add-padding-bottom-2 { padding-bottom: 2px; }
.add-padding-left-2   { padding-left: 2px; }
.add-padding-right-2  { padding-right: 2px; }
.add-padding-x-2      { padding-left: 2px; padding-right: 2px; }
.add-padding-y-2      { padding-top: 2px; padding-bottom: 2px; }
.add-padding-3        { padding: 3px; }
.add-padding-top-3    { padding-top: 3px; }
.add-padding-bottom-3 { padding-bottom: 3px; }
.add-padding-left-3   { padding-left: 3px; }
.add-padding-right-3  { padding-right: 3px; }
.add-padding-x-3      { padding-left: 3px; padding-right: 3px; }
.add-padding-y-3      { padding-top: 3px; padding-bottom: 3px; }
.add-padding-4        { padding: 4px; }
.add-padding-top-4    { padding-top: 4px; }
.add-padding-bottom-4 { padding-bottom: 4px; }
.add-padding-left-4   { padding-left: 4px; }
.add-padding-right-4  { padding-right: 4px; }
.add-padding-x-4      { padding-left: 4px; padding-right: 4px; }
.add-padding-y-4      { padding-top: 4px; padding-bottom: 4px; }
.add-padding-5        { padding: 5px; }
.add-padding-top-5    { padding-top: 5px; }
.add-padding-bottom-5 { padding-bottom: 5px; }
.add-padding-left-5   { padding-left: 5px; }
.add-padding-right-5  { padding-right: 5px; }
.add-padding-x-5      { padding-left: 5px; padding-right: 5px; }
.add-padding-y-5      { padding-top: 5px; padding-bottom: 5px; }
.add-padding-6        { padding: 6px; }
.add-padding-top-6    { padding-top: 6px; }
.add-padding-bottom-6 { padding-bottom: 6px; }
.add-padding-left-6   { padding-left: 6px; }
.add-padding-right-6  { padding-right: 6px; }
.add-padding-x-6      { padding-left: 6px; padding-right: 6px; }
.add-padding-y-6      { padding-top: 6px; padding-bottom: 6px; }
.add-padding-8        { padding: 8px; }
.add-padding-top-8    { padding-top: 8px; }
.add-padding-bottom-8 { padding-bottom: 8px; }
.add-padding-left-8   { padding-left: 8px; }
.add-padding-right-8  { padding-right: 8px; }
.add-padding-x-8      { padding-left: 8px; padding-right: 8px; }
.add-padding-y-8      { padding-top: 8px; padding-bottom: 8px; }
.add-padding-10        { padding: 10px; }
.add-padding-top-10    { padding-top: 10px; }
.add-padding-bottom-10 { padding-bottom: 10px; }
.add-padding-left-10   { padding-left: 10px; }
.add-padding-right-10  { padding-right: 10px; }
.add-padding-x-10      { padding-left: 10px; padding-right: 10px; }
.add-padding-y-10      { padding-top: 10px; padding-bottom: 10px; }
.add-padding-12        { padding: 12px; }
.add-padding-top-12    { padding-top: 12px; }
.add-padding-bottom-12 { padding-bottom: 12px; }
.add-padding-left-12   { padding-left: 12px; }
.add-padding-right-12  { padding-right: 12px; }
.add-padding-x-12      { padding-left: 12px; padding-right: 12px; }
.add-padding-y-12      { padding-top: 12px; padding-bottom: 12px; }
.add-padding-14        { padding: 14px; }
.add-padding-top-14    { padding-top: 14px; }
.add-padding-bottom-14 { padding-bottom: 14px; }
.add-padding-left-14   { padding-left: 14px; }
.add-padding-right-14  { padding-right: 14px; }
.add-padding-x-14      { padding-left: 14px; padding-right: 14px; }
.add-padding-y-14      { padding-top: 14px; padding-bottom: 14px; }
.add-padding-16        { padding: 16px; }
.add-padding-top-16    { padding-top: 16px; }
.add-padding-bottom-16 { padding-bottom: 16px; }
.add-padding-left-16   { padding-left: 16px; }
.add-padding-right-16  { padding-right: 16px; }
.add-padding-x-16      { padding-left: 16px; padding-right: 16px; }
.add-padding-y-16      { padding-top: 16px; padding-bottom: 16px; }
.add-padding-18        { padding: 18px; }
.add-padding-top-18    { padding-top: 18px; }
.add-padding-bottom-18 { padding-bottom: 18px; }
.add-padding-left-18   { padding-left: 18px; }
.add-padding-right-18  { padding-right: 18px; }
.add-padding-x-18      { padding-left: 18px; padding-right: 18px; }
.add-padding-y-18      { padding-top: 18px; padding-bottom: 18px; }
.add-padding-20        { padding: 20px; }
.add-padding-top-20    { padding-top: 20px; }
.add-padding-bottom-20 { padding-bottom: 20px; }
.add-padding-left-20   { padding-left: 20px; }
.add-padding-right-20  { padding-right: 20px; }
.add-padding-x-20      { padding-left: 20px; padding-right: 20px; }
.add-padding-y-20      { padding-top: 20px; padding-bottom: 20px; }
.add-padding-24        { padding: 24px; }
.add-padding-top-24    { padding-top: 24px; }
.add-padding-bottom-24 { padding-bottom: 24px; }
.add-padding-left-24   { padding-left: 24px; }
.add-padding-right-24  { padding-right: 24px; }
.add-padding-x-24      { padding-left: 24px; padding-right: 24px; }
.add-padding-y-24      { padding-top: 24px; padding-bottom: 24px; }
.add-padding-28        { padding: 28px; }
.add-padding-top-28    { padding-top: 28px; }
.add-padding-bottom-28 { padding-bottom: 28px; }
.add-padding-left-28   { padding-left: 28px; }
.add-padding-right-28  { padding-right: 28px; }
.add-padding-x-28      { padding-left: 28px; padding-right: 28px; }
.add-padding-y-28      { padding-top: 28px; padding-bottom: 28px; }
.add-padding-32        { padding: 32px; }
.add-padding-top-32    { padding-top: 32px; }
.add-padding-bottom-32 { padding-bottom: 32px; }
.add-padding-left-32   { padding-left: 32px; }
.add-padding-right-32  { padding-right: 32px; }
.add-padding-x-32      { padding-left: 32px; padding-right: 32px; }
.add-padding-y-32      { padding-top: 32px; padding-bottom: 32px; }
.add-padding-40        { padding: 40px; }
.add-padding-top-40    { padding-top: 40px; }
.add-padding-bottom-40 { padding-bottom: 40px; }
.add-padding-left-40   { padding-left: 40px; }
.add-padding-right-40  { padding-right: 40px; }
.add-padding-x-40      { padding-left: 40px; padding-right: 40px; }
.add-padding-y-40      { padding-top: 40px; padding-bottom: 40px; }
.add-padding-48        { padding: 48px; }
.add-padding-top-48    { padding-top: 48px; }
.add-padding-bottom-48 { padding-bottom: 48px; }
.add-padding-left-48   { padding-left: 48px; }
.add-padding-right-48  { padding-right: 48px; }
.add-padding-x-48      { padding-left: 48px; padding-right: 48px; }
.add-padding-y-48      { padding-top: 48px; padding-bottom: 48px; }
.add-padding-56        { padding: 56px; }
.add-padding-top-56    { padding-top: 56px; }
.add-padding-bottom-56 { padding-bottom: 56px; }
.add-padding-left-56   { padding-left: 56px; }
.add-padding-right-56  { padding-right: 56px; }
.add-padding-x-56      { padding-left: 56px; padding-right: 56px; }
.add-padding-y-56      { padding-top: 56px; padding-bottom: 56px; }
.add-padding-64        { padding: 64px; }
.add-padding-top-64    { padding-top: 64px; }
.add-padding-bottom-64 { padding-bottom: 64px; }
.add-padding-left-64   { padding-left: 64px; }
.add-padding-right-64  { padding-right: 64px; }
.add-padding-x-64      { padding-left: 64px; padding-right: 64px; }
.add-padding-y-64      { padding-top: 64px; padding-bottom: 64px; }
.add-padding-80        { padding: 80px; }
.add-padding-top-80    { padding-top: 80px; }
.add-padding-bottom-80 { padding-bottom: 80px; }
.add-padding-left-80   { padding-left: 80px; }
.add-padding-right-80  { padding-right: 80px; }
.add-padding-x-80      { padding-left: 80px; padding-right: 80px; }
.add-padding-y-80      { padding-top: 80px; padding-bottom: 80px; }
.add-padding-96        { padding: 96px; }
.add-padding-top-96    { padding-top: 96px; }
.add-padding-bottom-96 { padding-bottom: 96px; }
.add-padding-left-96   { padding-left: 96px; }
.add-padding-right-96  { padding-right: 96px; }
.add-padding-x-96      { padding-left: 96px; padding-right: 96px; }
.add-padding-y-96      { padding-top: 96px; padding-bottom: 96px; }
.add-padding-128        { padding: 128px; }
.add-padding-top-128    { padding-top: 128px; }
.add-padding-bottom-128 { padding-bottom: 128px; }
.add-padding-left-128   { padding-left: 128px; }
.add-padding-right-128  { padding-right: 128px; }
.add-padding-x-128      { padding-left: 128px; padding-right: 128px; }
.add-padding-y-128      { padding-top: 128px; padding-bottom: 128px; }
.add-padding-160        { padding: 160px; }
.add-padding-top-160    { padding-top: 160px; }
.add-padding-bottom-160 { padding-bottom: 160px; }
.add-padding-left-160   { padding-left: 160px; }
.add-padding-right-160  { padding-right: 160px; }
.add-padding-x-160      { padding-left: 160px; padding-right: 160px; }
.add-padding-y-160      { padding-top: 160px; padding-bottom: 160px; }
.add-padding-192        { padding: 192px; }
.add-padding-top-192    { padding-top: 192px; }
.add-padding-bottom-192 { padding-bottom: 192px; }
.add-padding-left-192   { padding-left: 192px; }
.add-padding-right-192  { padding-right: 192px; }
.add-padding-x-192      { padding-left: 192px; padding-right: 192px; }
.add-padding-y-192      { padding-top: 192px; padding-bottom: 192px; }
.add-padding-256        { padding: 256px; }
.add-padding-top-256    { padding-top: 256px; }
.add-padding-bottom-256 { padding-bottom: 256px; }
.add-padding-left-256   { padding-left: 256px; }
.add-padding-right-256  { padding-right: 256px; }
.add-padding-x-256      { padding-left: 256px; padding-right: 256px; }
.add-padding-y-256      { padding-top: 256px; padding-bottom: 256px; }
.add-padding-320        { padding: 320px; }
.add-padding-top-320    { padding-top: 320px; }
.add-padding-bottom-320 { padding-bottom: 320px; }
.add-padding-left-320   { padding-left: 320px; }
.add-padding-right-320  { padding-right: 320px; }
.add-padding-x-320      { padding-left: 320px; padding-right: 320px; }
.add-padding-y-320      { padding-top: 320px; padding-bottom: 320px; }
.add-padding-384        { padding: 384px; }
.add-padding-top-384    { padding-top: 384px; }
.add-padding-bottom-384 { padding-bottom: 384px; }
.add-padding-left-384   { padding-left: 384px; }
.add-padding-right-384  { padding-right: 384px; }
.add-padding-x-384      { padding-left: 384px; padding-right: 384px; }
.add-padding-y-384      { padding-top: 384px; padding-bottom: 384px; }
.add-padding-512        { padding: 512px; }
.add-padding-top-512    { padding-top: 512px; }
.add-padding-bottom-512 { padding-bottom: 512px; }
.add-padding-left-512   { padding-left: 512px; }
.add-padding-right-512  { padding-right: 512px; }
.add-padding-x-512      { padding-left: 512px; padding-right: 512px; }
.add-padding-y-512      { padding-top: 512px; padding-bottom: 512px; }
.add-padding-640        { padding: 640px; }
.add-padding-top-640    { padding-top: 640px; }
.add-padding-bottom-640 { padding-bottom: 640px; }
.add-padding-left-640   { padding-left: 640px; }
.add-padding-right-640  { padding-right: 640px; }
.add-padding-x-640      { padding-left: 640px; padding-right: 640px; }
.add-padding-y-640      { padding-top: 640px; padding-bottom: 640px; }
.add-padding-768        { padding: 768px; }
.add-padding-top-768    { padding-top: 768px; }
.add-padding-bottom-768 { padding-bottom: 768px; }
.add-padding-left-768   { padding-left: 768px; }
.add-padding-right-768  { padding-right: 768px; }
.add-padding-x-768      { padding-left: 768px; padding-right: 768px; }
.add-padding-y-768      { padding-top: 768px; padding-bottom: 768px; }
.add-padding-1024        { padding: 1024px; }
.add-padding-top-1024    { padding-top: 1024px; }
.add-padding-bottom-1024 { padding-bottom: 1024px; }
.add-padding-left-1024   { padding-left: 1024px; }
.add-padding-right-1024  { padding-right: 1024px; }
.add-padding-x-1024      { padding-left: 1024px; padding-right: 1024px; }
.add-padding-y-1024      { padding-top: 1024px; padding-bottom: 1024px; }

/* ── Margin ── */
.add-margin-0        { margin: 0px; }
.add-margin-top-0    { margin-top: 0px; }
.add-margin-bottom-0 { margin-bottom: 0px; }
.add-margin-left-0   { margin-left: 0px; }
.add-margin-right-0  { margin-right: 0px; }
.add-margin-x-0      { margin-left: 0px; margin-right: 0px; }
.add-margin-y-0      { margin-top: 0px; margin-bottom: 0px; }
.add-margin-1        { margin: 1px; }
.add-margin-top-1    { margin-top: 1px; }
.add-margin-bottom-1 { margin-bottom: 1px; }
.add-margin-left-1   { margin-left: 1px; }
.add-margin-right-1  { margin-right: 1px; }
.add-margin-x-1      { margin-left: 1px; margin-right: 1px; }
.add-margin-y-1      { margin-top: 1px; margin-bottom: 1px; }
.add-margin-2        { margin: 2px; }
.add-margin-top-2    { margin-top: 2px; }
.add-margin-bottom-2 { margin-bottom: 2px; }
.add-margin-left-2   { margin-left: 2px; }
.add-margin-right-2  { margin-right: 2px; }
.add-margin-x-2      { margin-left: 2px; margin-right: 2px; }
.add-margin-y-2      { margin-top: 2px; margin-bottom: 2px; }
.add-margin-3        { margin: 3px; }
.add-margin-top-3    { margin-top: 3px; }
.add-margin-bottom-3 { margin-bottom: 3px; }
.add-margin-left-3   { margin-left: 3px; }
.add-margin-right-3  { margin-right: 3px; }
.add-margin-x-3      { margin-left: 3px; margin-right: 3px; }
.add-margin-y-3      { margin-top: 3px; margin-bottom: 3px; }
.add-margin-4        { margin: 4px; }
.add-margin-top-4    { margin-top: 4px; }
.add-margin-bottom-4 { margin-bottom: 4px; }
.add-margin-left-4   { margin-left: 4px; }
.add-margin-right-4  { margin-right: 4px; }
.add-margin-x-4      { margin-left: 4px; margin-right: 4px; }
.add-margin-y-4      { margin-top: 4px; margin-bottom: 4px; }
.add-margin-5        { margin: 5px; }
.add-margin-top-5    { margin-top: 5px; }
.add-margin-bottom-5 { margin-bottom: 5px; }
.add-margin-left-5   { margin-left: 5px; }
.add-margin-right-5  { margin-right: 5px; }
.add-margin-x-5      { margin-left: 5px; margin-right: 5px; }
.add-margin-y-5      { margin-top: 5px; margin-bottom: 5px; }
.add-margin-6        { margin: 6px; }
.add-margin-top-6    { margin-top: 6px; }
.add-margin-bottom-6 { margin-bottom: 6px; }
.add-margin-left-6   { margin-left: 6px; }
.add-margin-right-6  { margin-right: 6px; }
.add-margin-x-6      { margin-left: 6px; margin-right: 6px; }
.add-margin-y-6      { margin-top: 6px; margin-bottom: 6px; }
.add-margin-8        { margin: 8px; }
.add-margin-top-8    { margin-top: 8px; }
.add-margin-bottom-8 { margin-bottom: 8px; }
.add-margin-left-8   { margin-left: 8px; }
.add-margin-right-8  { margin-right: 8px; }
.add-margin-x-8      { margin-left: 8px; margin-right: 8px; }
.add-margin-y-8      { margin-top: 8px; margin-bottom: 8px; }
.add-margin-10        { margin: 10px; }
.add-margin-top-10    { margin-top: 10px; }
.add-margin-bottom-10 { margin-bottom: 10px; }
.add-margin-left-10   { margin-left: 10px; }
.add-margin-right-10  { margin-right: 10px; }
.add-margin-x-10      { margin-left: 10px; margin-right: 10px; }
.add-margin-y-10      { margin-top: 10px; margin-bottom: 10px; }
.add-margin-12        { margin: 12px; }
.add-margin-top-12    { margin-top: 12px; }
.add-margin-bottom-12 { margin-bottom: 12px; }
.add-margin-left-12   { margin-left: 12px; }
.add-margin-right-12  { margin-right: 12px; }
.add-margin-x-12      { margin-left: 12px; margin-right: 12px; }
.add-margin-y-12      { margin-top: 12px; margin-bottom: 12px; }
.add-margin-14        { margin: 14px; }
.add-margin-top-14    { margin-top: 14px; }
.add-margin-bottom-14 { margin-bottom: 14px; }
.add-margin-left-14   { margin-left: 14px; }
.add-margin-right-14  { margin-right: 14px; }
.add-margin-x-14      { margin-left: 14px; margin-right: 14px; }
.add-margin-y-14      { margin-top: 14px; margin-bottom: 14px; }
.add-margin-16        { margin: 16px; }
.add-margin-top-16    { margin-top: 16px; }
.add-margin-bottom-16 { margin-bottom: 16px; }
.add-margin-left-16   { margin-left: 16px; }
.add-margin-right-16  { margin-right: 16px; }
.add-margin-x-16      { margin-left: 16px; margin-right: 16px; }
.add-margin-y-16      { margin-top: 16px; margin-bottom: 16px; }
.add-margin-18        { margin: 18px; }
.add-margin-top-18    { margin-top: 18px; }
.add-margin-bottom-18 { margin-bottom: 18px; }
.add-margin-left-18   { margin-left: 18px; }
.add-margin-right-18  { margin-right: 18px; }
.add-margin-x-18      { margin-left: 18px; margin-right: 18px; }
.add-margin-y-18      { margin-top: 18px; margin-bottom: 18px; }
.add-margin-20        { margin: 20px; }
.add-margin-top-20    { margin-top: 20px; }
.add-margin-bottom-20 { margin-bottom: 20px; }
.add-margin-left-20   { margin-left: 20px; }
.add-margin-right-20  { margin-right: 20px; }
.add-margin-x-20      { margin-left: 20px; margin-right: 20px; }
.add-margin-y-20      { margin-top: 20px; margin-bottom: 20px; }
.add-margin-24        { margin: 24px; }
.add-margin-top-24    { margin-top: 24px; }
.add-margin-bottom-24 { margin-bottom: 24px; }
.add-margin-left-24   { margin-left: 24px; }
.add-margin-right-24  { margin-right: 24px; }
.add-margin-x-24      { margin-left: 24px; margin-right: 24px; }
.add-margin-y-24      { margin-top: 24px; margin-bottom: 24px; }
.add-margin-28        { margin: 28px; }
.add-margin-top-28    { margin-top: 28px; }
.add-margin-bottom-28 { margin-bottom: 28px; }
.add-margin-left-28   { margin-left: 28px; }
.add-margin-right-28  { margin-right: 28px; }
.add-margin-x-28      { margin-left: 28px; margin-right: 28px; }
.add-margin-y-28      { margin-top: 28px; margin-bottom: 28px; }
.add-margin-32        { margin: 32px; }
.add-margin-top-32    { margin-top: 32px; }
.add-margin-bottom-32 { margin-bottom: 32px; }
.add-margin-left-32   { margin-left: 32px; }
.add-margin-right-32  { margin-right: 32px; }
.add-margin-x-32      { margin-left: 32px; margin-right: 32px; }
.add-margin-y-32      { margin-top: 32px; margin-bottom: 32px; }
.add-margin-40        { margin: 40px; }
.add-margin-top-40    { margin-top: 40px; }
.add-margin-bottom-40 { margin-bottom: 40px; }
.add-margin-left-40   { margin-left: 40px; }
.add-margin-right-40  { margin-right: 40px; }
.add-margin-x-40      { margin-left: 40px; margin-right: 40px; }
.add-margin-y-40      { margin-top: 40px; margin-bottom: 40px; }
.add-margin-48        { margin: 48px; }
.add-margin-top-48    { margin-top: 48px; }
.add-margin-bottom-48 { margin-bottom: 48px; }
.add-margin-left-48   { margin-left: 48px; }
.add-margin-right-48  { margin-right: 48px; }
.add-margin-x-48      { margin-left: 48px; margin-right: 48px; }
.add-margin-y-48      { margin-top: 48px; margin-bottom: 48px; }
.add-margin-56        { margin: 56px; }
.add-margin-top-56    { margin-top: 56px; }
.add-margin-bottom-56 { margin-bottom: 56px; }
.add-margin-left-56   { margin-left: 56px; }
.add-margin-right-56  { margin-right: 56px; }
.add-margin-x-56      { margin-left: 56px; margin-right: 56px; }
.add-margin-y-56      { margin-top: 56px; margin-bottom: 56px; }
.add-margin-64        { margin: 64px; }
.add-margin-top-64    { margin-top: 64px; }
.add-margin-bottom-64 { margin-bottom: 64px; }
.add-margin-left-64   { margin-left: 64px; }
.add-margin-right-64  { margin-right: 64px; }
.add-margin-x-64      { margin-left: 64px; margin-right: 64px; }
.add-margin-y-64      { margin-top: 64px; margin-bottom: 64px; }
.add-margin-80        { margin: 80px; }
.add-margin-top-80    { margin-top: 80px; }
.add-margin-bottom-80 { margin-bottom: 80px; }
.add-margin-left-80   { margin-left: 80px; }
.add-margin-right-80  { margin-right: 80px; }
.add-margin-x-80      { margin-left: 80px; margin-right: 80px; }
.add-margin-y-80      { margin-top: 80px; margin-bottom: 80px; }
.add-margin-96        { margin: 96px; }
.add-margin-top-96    { margin-top: 96px; }
.add-margin-bottom-96 { margin-bottom: 96px; }
.add-margin-left-96   { margin-left: 96px; }
.add-margin-right-96  { margin-right: 96px; }
.add-margin-x-96      { margin-left: 96px; margin-right: 96px; }
.add-margin-y-96      { margin-top: 96px; margin-bottom: 96px; }
.add-margin-128        { margin: 128px; }
.add-margin-top-128    { margin-top: 128px; }
.add-margin-bottom-128 { margin-bottom: 128px; }
.add-margin-left-128   { margin-left: 128px; }
.add-margin-right-128  { margin-right: 128px; }
.add-margin-x-128      { margin-left: 128px; margin-right: 128px; }
.add-margin-y-128      { margin-top: 128px; margin-bottom: 128px; }
.add-margin-160        { margin: 160px; }
.add-margin-top-160    { margin-top: 160px; }
.add-margin-bottom-160 { margin-bottom: 160px; }
.add-margin-left-160   { margin-left: 160px; }
.add-margin-right-160  { margin-right: 160px; }
.add-margin-x-160      { margin-left: 160px; margin-right: 160px; }
.add-margin-y-160      { margin-top: 160px; margin-bottom: 160px; }
.add-margin-192        { margin: 192px; }
.add-margin-top-192    { margin-top: 192px; }
.add-margin-bottom-192 { margin-bottom: 192px; }
.add-margin-left-192   { margin-left: 192px; }
.add-margin-right-192  { margin-right: 192px; }
.add-margin-x-192      { margin-left: 192px; margin-right: 192px; }
.add-margin-y-192      { margin-top: 192px; margin-bottom: 192px; }
.add-margin-256        { margin: 256px; }
.add-margin-top-256    { margin-top: 256px; }
.add-margin-bottom-256 { margin-bottom: 256px; }
.add-margin-left-256   { margin-left: 256px; }
.add-margin-right-256  { margin-right: 256px; }
.add-margin-x-256      { margin-left: 256px; margin-right: 256px; }
.add-margin-y-256      { margin-top: 256px; margin-bottom: 256px; }
.add-margin-320        { margin: 320px; }
.add-margin-top-320    { margin-top: 320px; }
.add-margin-bottom-320 { margin-bottom: 320px; }
.add-margin-left-320   { margin-left: 320px; }
.add-margin-right-320  { margin-right: 320px; }
.add-margin-x-320      { margin-left: 320px; margin-right: 320px; }
.add-margin-y-320      { margin-top: 320px; margin-bottom: 320px; }
.add-margin-384        { margin: 384px; }
.add-margin-top-384    { margin-top: 384px; }
.add-margin-bottom-384 { margin-bottom: 384px; }
.add-margin-left-384   { margin-left: 384px; }
.add-margin-right-384  { margin-right: 384px; }
.add-margin-x-384      { margin-left: 384px; margin-right: 384px; }
.add-margin-y-384      { margin-top: 384px; margin-bottom: 384px; }
.add-margin-512        { margin: 512px; }
.add-margin-top-512    { margin-top: 512px; }
.add-margin-bottom-512 { margin-bottom: 512px; }
.add-margin-left-512   { margin-left: 512px; }
.add-margin-right-512  { margin-right: 512px; }
.add-margin-x-512      { margin-left: 512px; margin-right: 512px; }
.add-margin-y-512      { margin-top: 512px; margin-bottom: 512px; }
.add-margin-640        { margin: 640px; }
.add-margin-top-640    { margin-top: 640px; }
.add-margin-bottom-640 { margin-bottom: 640px; }
.add-margin-left-640   { margin-left: 640px; }
.add-margin-right-640  { margin-right: 640px; }
.add-margin-x-640      { margin-left: 640px; margin-right: 640px; }
.add-margin-y-640      { margin-top: 640px; margin-bottom: 640px; }
.add-margin-768        { margin: 768px; }
.add-margin-top-768    { margin-top: 768px; }
.add-margin-bottom-768 { margin-bottom: 768px; }
.add-margin-left-768   { margin-left: 768px; }
.add-margin-right-768  { margin-right: 768px; }
.add-margin-x-768      { margin-left: 768px; margin-right: 768px; }
.add-margin-y-768      { margin-top: 768px; margin-bottom: 768px; }
.add-margin-1024        { margin: 1024px; }
.add-margin-top-1024    { margin-top: 1024px; }
.add-margin-bottom-1024 { margin-bottom: 1024px; }
.add-margin-left-1024   { margin-left: 1024px; }
.add-margin-right-1024  { margin-right: 1024px; }
.add-margin-x-1024      { margin-left: 1024px; margin-right: 1024px; }
.add-margin-y-1024      { margin-top: 1024px; margin-bottom: 1024px; }
.center-margin            { margin-left: auto; margin-right: auto; }
.add-margin-auto          { margin: auto; }
.add-margin-top-auto      { margin-top: auto; }
.add-margin-bottom-auto   { margin-bottom: auto; }
.add-margin-left-auto     { margin-left: auto; }
.add-margin-right-auto    { margin-right: auto; }
.add-margin-x-auto        { margin-left: auto; margin-right: auto; }
.add-margin-y-auto        { margin-top: auto; margin-bottom: auto; }

/* ── Negative Margin ── */
.subtract-margin-1        { margin: -1px; }
.subtract-margin-top-1    { margin-top: -1px; }
.subtract-margin-bottom-1 { margin-bottom: -1px; }
.subtract-margin-left-1   { margin-left: -1px; }
.subtract-margin-right-1  { margin-right: -1px; }
.subtract-margin-2        { margin: -2px; }
.subtract-margin-top-2    { margin-top: -2px; }
.subtract-margin-bottom-2 { margin-bottom: -2px; }
.subtract-margin-left-2   { margin-left: -2px; }
.subtract-margin-right-2  { margin-right: -2px; }
.subtract-margin-4        { margin: -4px; }
.subtract-margin-top-4    { margin-top: -4px; }
.subtract-margin-bottom-4 { margin-bottom: -4px; }
.subtract-margin-left-4   { margin-left: -4px; }
.subtract-margin-right-4  { margin-right: -4px; }
.subtract-margin-8        { margin: -8px; }
.subtract-margin-top-8    { margin-top: -8px; }
.subtract-margin-bottom-8 { margin-bottom: -8px; }
.subtract-margin-left-8   { margin-left: -8px; }
.subtract-margin-right-8  { margin-right: -8px; }
.subtract-margin-12        { margin: -12px; }
.subtract-margin-top-12    { margin-top: -12px; }
.subtract-margin-bottom-12 { margin-bottom: -12px; }
.subtract-margin-left-12   { margin-left: -12px; }
.subtract-margin-right-12  { margin-right: -12px; }
.subtract-margin-16        { margin: -16px; }
.subtract-margin-top-16    { margin-top: -16px; }
.subtract-margin-bottom-16 { margin-bottom: -16px; }
.subtract-margin-left-16   { margin-left: -16px; }
.subtract-margin-right-16  { margin-right: -16px; }
.subtract-margin-20        { margin: -20px; }
.subtract-margin-top-20    { margin-top: -20px; }
.subtract-margin-bottom-20 { margin-bottom: -20px; }
.subtract-margin-left-20   { margin-left: -20px; }
.subtract-margin-right-20  { margin-right: -20px; }
.subtract-margin-24        { margin: -24px; }
.subtract-margin-top-24    { margin-top: -24px; }
.subtract-margin-bottom-24 { margin-bottom: -24px; }
.subtract-margin-left-24   { margin-left: -24px; }
.subtract-margin-right-24  { margin-right: -24px; }
.subtract-margin-32        { margin: -32px; }
.subtract-margin-top-32    { margin-top: -32px; }
.subtract-margin-bottom-32 { margin-bottom: -32px; }
.subtract-margin-left-32   { margin-left: -32px; }
.subtract-margin-right-32  { margin-right: -32px; }
.subtract-margin-40        { margin: -40px; }
.subtract-margin-top-40    { margin-top: -40px; }
.subtract-margin-bottom-40 { margin-bottom: -40px; }
.subtract-margin-left-40   { margin-left: -40px; }
.subtract-margin-right-40  { margin-right: -40px; }
.subtract-margin-48        { margin: -48px; }
.subtract-margin-top-48    { margin-top: -48px; }
.subtract-margin-bottom-48 { margin-bottom: -48px; }
.subtract-margin-left-48   { margin-left: -48px; }
.subtract-margin-right-48  { margin-right: -48px; }
.subtract-margin-64        { margin: -64px; }
.subtract-margin-top-64    { margin-top: -64px; }
.subtract-margin-bottom-64 { margin-bottom: -64px; }
.subtract-margin-left-64   { margin-left: -64px; }
.subtract-margin-right-64  { margin-right: -64px; }

/* ── Gap ── */
.gap-0   { gap: 0px; }
.gap-x-0 { column-gap: 0px; }
.gap-y-0 { row-gap: 0px; }
.gap-1   { gap: 1px; }
.gap-x-1 { column-gap: 1px; }
.gap-y-1 { row-gap: 1px; }
.gap-2   { gap: 2px; }
.gap-x-2 { column-gap: 2px; }
.gap-y-2 { row-gap: 2px; }
.gap-3   { gap: 3px; }
.gap-x-3 { column-gap: 3px; }
.gap-y-3 { row-gap: 3px; }
.gap-4   { gap: 4px; }
.gap-x-4 { column-gap: 4px; }
.gap-y-4 { row-gap: 4px; }
.gap-5   { gap: 5px; }
.gap-x-5 { column-gap: 5px; }
.gap-y-5 { row-gap: 5px; }
.gap-6   { gap: 6px; }
.gap-x-6 { column-gap: 6px; }
.gap-y-6 { row-gap: 6px; }
.gap-8   { gap: 8px; }
.gap-x-8 { column-gap: 8px; }
.gap-y-8 { row-gap: 8px; }
.gap-10   { gap: 10px; }
.gap-x-10 { column-gap: 10px; }
.gap-y-10 { row-gap: 10px; }
.gap-12   { gap: 12px; }
.gap-x-12 { column-gap: 12px; }
.gap-y-12 { row-gap: 12px; }
.gap-14   { gap: 14px; }
.gap-x-14 { column-gap: 14px; }
.gap-y-14 { row-gap: 14px; }
.gap-16   { gap: 16px; }
.gap-x-16 { column-gap: 16px; }
.gap-y-16 { row-gap: 16px; }
.gap-18   { gap: 18px; }
.gap-x-18 { column-gap: 18px; }
.gap-y-18 { row-gap: 18px; }
.gap-20   { gap: 20px; }
.gap-x-20 { column-gap: 20px; }
.gap-y-20 { row-gap: 20px; }
.gap-24   { gap: 24px; }
.gap-x-24 { column-gap: 24px; }
.gap-y-24 { row-gap: 24px; }
.gap-28   { gap: 28px; }
.gap-x-28 { column-gap: 28px; }
.gap-y-28 { row-gap: 28px; }
.gap-32   { gap: 32px; }
.gap-x-32 { column-gap: 32px; }
.gap-y-32 { row-gap: 32px; }
.gap-40   { gap: 40px; }
.gap-x-40 { column-gap: 40px; }
.gap-y-40 { row-gap: 40px; }
.gap-48   { gap: 48px; }
.gap-x-48 { column-gap: 48px; }
.gap-y-48 { row-gap: 48px; }
.gap-56   { gap: 56px; }
.gap-x-56 { column-gap: 56px; }
.gap-y-56 { row-gap: 56px; }
.gap-64   { gap: 64px; }
.gap-x-64 { column-gap: 64px; }
.gap-y-64 { row-gap: 64px; }
.gap-80   { gap: 80px; }
.gap-x-80 { column-gap: 80px; }
.gap-y-80 { row-gap: 80px; }
.gap-96   { gap: 96px; }
.gap-x-96 { column-gap: 96px; }
.gap-y-96 { row-gap: 96px; }
.gap-128   { gap: 128px; }
.gap-x-128 { column-gap: 128px; }
.gap-y-128 { row-gap: 128px; }
.gap-160   { gap: 160px; }
.gap-x-160 { column-gap: 160px; }
.gap-y-160 { row-gap: 160px; }
.gap-192   { gap: 192px; }
.gap-x-192 { column-gap: 192px; }
.gap-y-192 { row-gap: 192px; }
.gap-256   { gap: 256px; }
.gap-x-256 { column-gap: 256px; }
.gap-y-256 { row-gap: 256px; }
.gap-320   { gap: 320px; }
.gap-x-320 { column-gap: 320px; }
.gap-y-320 { row-gap: 320px; }
.gap-384   { gap: 384px; }
.gap-x-384 { column-gap: 384px; }
.gap-y-384 { row-gap: 384px; }
.gap-512   { gap: 512px; }
.gap-x-512 { column-gap: 512px; }
.gap-y-512 { row-gap: 512px; }
.gap-640   { gap: 640px; }
.gap-x-640 { column-gap: 640px; }
.gap-y-640 { row-gap: 640px; }
.gap-768   { gap: 768px; }
.gap-x-768 { column-gap: 768px; }
.gap-y-768 { row-gap: 768px; }
.gap-1024   { gap: 1024px; }
.gap-x-1024 { column-gap: 1024px; }
.gap-y-1024 { row-gap: 1024px; }