mycsslab/src/utilities/spacing.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Spacing Utilities
 * Margin and padding utilities with consistent spacing scale
 */

/* Margin */
.my-m-0 { margin: 0; }
.my-m-1 { margin: 0.25rem; }
.my-m-2 { margin: 0.5rem; }
.my-m-3 { margin: 0.75rem; }
.my-m-4 { margin: 1rem; }
.my-m-5 { margin: 1.25rem; }
.my-m-6 { margin: 1.5rem; }
.my-m-8 { margin: 2rem; }
.my-m-10 { margin: 2.5rem; }
.my-m-12 { margin: 3rem; }
.my-m-16 { margin: 4rem; }
.my-m-20 { margin: 5rem; }
.my-m-24 { margin: 6rem; }
.my-m-32 { margin: 8rem; }
.my-m-40 { margin: 10rem; }
.my-m-48 { margin: 12rem; }
.my-m-56 { margin: 14rem; }
.my-m-64 { margin: 16rem; }
.my-m-72 { margin: 18rem; }
.my-m-80 { margin: 20rem; }
.my-m-96 { margin: 24rem; }
.my-m-auto { margin: auto; }
.my-m-px { margin: 1px; }

/* Margin X */
.my-mx-0 { margin-left: 0; margin-right: 0; }
.my-mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.my-mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.my-mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.my-mx-4 { margin-left: 1rem; margin-right: 1rem; }
.my-mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.my-mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.my-mx-8 { margin-left: 2rem; margin-right: 2rem; }
.my-mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
.my-mx-12 { margin-left: 3rem; margin-right: 3rem; }
.my-mx-16 { margin-left: 4rem; margin-right: 4rem; }
.my-mx-20 { margin-left: 5rem; margin-right: 5rem; }
.my-mx-24 { margin-left: 6rem; margin-right: 6rem; }
.my-mx-32 { margin-left: 8rem; margin-right: 8rem; }
.my-mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y */
.my-my-0 { margin-top: 0; margin-bottom: 0; }
.my-my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.my-my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.my-my-16 { margin-top: 4rem; margin-bottom: 4rem; }
.my-my-20 { margin-top: 5rem; margin-bottom: 5rem; }
.my-my-24 { margin-top: 6rem; margin-bottom: 6rem; }
.my-my-32 { margin-top: 8rem; margin-bottom: 8rem; }
.my-my-auto { margin-top: auto; margin-bottom: auto; }

/* Margin Top */
.my-mt-0 { margin-top: 0; }
.my-mt-1 { margin-top: 0.25rem; }
.my-mt-2 { margin-top: 0.5rem; }
.my-mt-3 { margin-top: 0.75rem; }
.my-mt-4 { margin-top: 1rem; }
.my-mt-5 { margin-top: 1.25rem; }
.my-mt-6 { margin-top: 1.5rem; }
.my-mt-8 { margin-top: 2rem; }
.my-mt-10 { margin-top: 2.5rem; }
.my-mt-12 { margin-top: 3rem; }
.my-mt-16 { margin-top: 4rem; }
.my-mt-20 { margin-top: 5rem; }
.my-mt-24 { margin-top: 6rem; }
.my-mt-32 { margin-top: 8rem; }
.my-mt-auto { margin-top: auto; }

/* Margin Right */
.my-mr-0 { margin-right: 0; }
.my-mr-1 { margin-right: 0.25rem; }
.my-mr-2 { margin-right: 0.5rem; }
.my-mr-3 { margin-right: 0.75rem; }
.my-mr-4 { margin-right: 1rem; }
.my-mr-5 { margin-right: 1.25rem; }
.my-mr-6 { margin-right: 1.5rem; }
.my-mr-8 { margin-right: 2rem; }
.my-mr-10 { margin-right: 2.5rem; }
.my-mr-12 { margin-right: 3rem; }
.my-mr-16 { margin-right: 4rem; }
.my-mr-20 { margin-right: 5rem; }
.my-mr-24 { margin-right: 6rem; }
.my-mr-32 { margin-right: 8rem; }
.my-mr-auto { margin-right: auto; }

/* Margin Bottom */
.my-mb-0 { margin-bottom: 0; }
.my-mb-1 { margin-bottom: 0.25rem; }
.my-mb-2 { margin-bottom: 0.5rem; }
.my-mb-3 { margin-bottom: 0.75rem; }
.my-mb-4 { margin-bottom: 1rem; }
.my-mb-5 { margin-bottom: 1.25rem; }
.my-mb-6 { margin-bottom: 1.5rem; }
.my-mb-8 { margin-bottom: 2rem; }
.my-mb-10 { margin-bottom: 2.5rem; }
.my-mb-12 { margin-bottom: 3rem; }
.my-mb-16 { margin-bottom: 4rem; }
.my-mb-20 { margin-bottom: 5rem; }
.my-mb-24 { margin-bottom: 6rem; }
.my-mb-32 { margin-bottom: 8rem; }
.my-mb-auto { margin-bottom: auto; }

/* Margin Left */
.my-ml-0 { margin-left: 0; }
.my-ml-1 { margin-left: 0.25rem; }
.my-ml-2 { margin-left: 0.5rem; }
.my-ml-3 { margin-left: 0.75rem; }
.my-ml-4 { margin-left: 1rem; }
.my-ml-5 { margin-left: 1.25rem; }
.my-ml-6 { margin-left: 1.5rem; }
.my-ml-8 { margin-left: 2rem; }
.my-ml-10 { margin-left: 2.5rem; }
.my-ml-12 { margin-left: 3rem; }
.my-ml-16 { margin-left: 4rem; }
.my-ml-20 { margin-left: 5rem; }
.my-ml-24 { margin-left: 6rem; }
.my-ml-32 { margin-left: 8rem; }
.my-ml-auto { margin-left: auto; }

/* Padding */
.my-p-0 { padding: 0; }
.my-p-1 { padding: 0.25rem; }
.my-p-2 { padding: 0.5rem; }
.my-p-3 { padding: 0.75rem; }
.my-p-4 { padding: 1rem; }
.my-p-5 { padding: 1.25rem; }
.my-p-6 { padding: 1.5rem; }
.my-p-8 { padding: 2rem; }
.my-p-10 { padding: 2.5rem; }
.my-p-12 { padding: 3rem; }
.my-p-16 { padding: 4rem; }
.my-p-20 { padding: 5rem; }
.my-p-24 { padding: 6rem; }
.my-p-32 { padding: 8rem; }
.my-p-40 { padding: 10rem; }
.my-p-48 { padding: 12rem; }
.my-p-56 { padding: 14rem; }
.my-p-64 { padding: 16rem; }
.my-p-72 { padding: 18rem; }
.my-p-80 { padding: 20rem; }
.my-p-96 { padding: 24rem; }
.my-p-px { padding: 1px; }

/* Padding X */
.my-px-0 { padding-left: 0; padding-right: 0; }
.my-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.my-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.my-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.my-px-4 { padding-left: 1rem; padding-right: 1rem; }
.my-px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.my-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.my-px-8 { padding-left: 2rem; padding-right: 2rem; }
.my-px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.my-px-12 { padding-left: 3rem; padding-right: 3rem; }
.my-px-16 { padding-left: 4rem; padding-right: 4rem; }
.my-px-20 { padding-left: 5rem; padding-right: 5rem; }
.my-px-24 { padding-left: 6rem; padding-right: 6rem; }
.my-px-32 { padding-left: 8rem; padding-right: 8rem; }

/* Padding Y */
.my-py-0 { padding-top: 0; padding-bottom: 0; }
.my-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.my-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.my-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.my-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.my-py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.my-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.my-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.my-py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.my-py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.my-py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.my-py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.my-py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.my-py-32 { padding-top: 8rem; padding-bottom: 8rem; }

/* Padding Top */
.my-pt-0 { padding-top: 0; }
.my-pt-1 { padding-top: 0.25rem; }
.my-pt-2 { padding-top: 0.5rem; }
.my-pt-3 { padding-top: 0.75rem; }
.my-pt-4 { padding-top: 1rem; }
.my-pt-5 { padding-top: 1.25rem; }
.my-pt-6 { padding-top: 1.5rem; }
.my-pt-8 { padding-top: 2rem; }
.my-pt-10 { padding-top: 2.5rem; }
.my-pt-12 { padding-top: 3rem; }
.my-pt-16 { padding-top: 4rem; }
.my-pt-20 { padding-top: 5rem; }
.my-pt-24 { padding-top: 6rem; }
.my-pt-32 { padding-top: 8rem; }

/* Padding Right */
.my-pr-0 { padding-right: 0; }
.my-pr-1 { padding-right: 0.25rem; }
.my-pr-2 { padding-right: 0.5rem; }
.my-pr-3 { padding-right: 0.75rem; }
.my-pr-4 { padding-right: 1rem; }
.my-pr-5 { padding-right: 1.25rem; }
.my-pr-6 { padding-right: 1.5rem; }
.my-pr-8 { padding-right: 2rem; }
.my-pr-10 { padding-right: 2.5rem; }
.my-pr-12 { padding-right: 3rem; }
.my-pr-16 { padding-right: 4rem; }
.my-pr-20 { padding-right: 5rem; }
.my-pr-24 { padding-right: 6rem; }
.my-pr-32 { padding-right: 8rem; }

/* Padding Bottom */
.my-pb-0 { padding-bottom: 0; }
.my-pb-1 { padding-bottom: 0.25rem; }
.my-pb-2 { padding-bottom: 0.5rem; }
.my-pb-3 { padding-bottom: 0.75rem; }
.my-pb-4 { padding-bottom: 1rem; }
.my-pb-5 { padding-bottom: 1.25rem; }
.my-pb-6 { padding-bottom: 1.5rem; }
.my-pb-8 { padding-bottom: 2rem; }
.my-pb-10 { padding-bottom: 2.5rem; }
.my-pb-12 { padding-bottom: 3rem; }
.my-pb-16 { padding-bottom: 4rem; }
.my-pb-20 { padding-bottom: 5rem; }
.my-pb-24 { padding-bottom: 6rem; }
.my-pb-32 { padding-bottom: 8rem; }

/* Padding Left */
.my-pl-0 { padding-left: 0; }
.my-pl-1 { padding-left: 0.25rem; }
.my-pl-2 { padding-left: 0.5rem; }
.my-pl-3 { padding-left: 0.75rem; }
.my-pl-4 { padding-left: 1rem; }
.my-pl-5 { padding-left: 1.25rem; }
.my-pl-6 { padding-left: 1.5rem; }
.my-pl-8 { padding-left: 2rem; }
.my-pl-10 { padding-left: 2.5rem; }
.my-pl-12 { padding-left: 3rem; }
.my-pl-16 { padding-left: 4rem; }
.my-pl-20 { padding-left: 5rem; }
.my-pl-24 { padding-left: 6rem; }
.my-pl-32 { padding-left: 8rem; }