Padding - horizontal

These padding styles set the left and right paddings.

The size of the padding is set with the padding variables.

Each padding size has a class to go with each of the media query viewport sizes. For example:

px-2-3xs
px-2-2xs
px-2-xs
px-2-sm
px-2-md
px-2-lg
px-2-xl
px-2-1xl
px-2-3xl
px-2-4xl
px-2-5xl

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/padding/horizontal.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/padding/3xs/horizontal.css';
@import 'cacao-css/dist/padding/2xs/horizontal.css';
@import 'cacao-css/dist/padding/xs/horizontal.css';
@import 'cacao-css/dist/padding/sm/horizontal.css';
@import 'cacao-css/dist/padding/md/horizontal.css';
@import 'cacao-css/dist/padding/lg/horizontal.css';
@import 'cacao-css/dist/padding/xl/horizontal.css';
@import 'cacao-css/dist/padding/2xl/horizontal.css';
@import 'cacao-css/dist/padding/3xl/horizontal.css';
@import 'cacao-css/dist/padding/4xl/horizontal.css';
@import 'cacao-css/dist/padding/5xl/horizontal.css';

See Import Cacao CSS for more information.

Source CSS

Default styles

padding/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.px-0 {
    padding-left: var(--padding-0);
    padding-right: var(--padding-0);
}

.px-1 {
    padding-left: var(--padding-1);
    padding-right: var(--padding-1);
}

.px-2 {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
}

.px-3 {
    padding-left: var(--padding-3);
    padding-right: var(--padding-3);
}

.px-4 {
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
}

.px-5 {
    padding-left: var(--padding-5);
    padding-right: var(--padding-5);
}

.px-6 {
    padding-left: var(--padding-6);
    padding-right: var(--padding-6);
}

.px-7 {
    padding-left: var(--padding-7);
    padding-right: var(--padding-7);
}

.px-8 {
    padding-left: var(--padding-8);
    padding-right: var(--padding-8);
}

.px-9 {
    padding-left: var(--padding-9);
    padding-right: var(--padding-9);
}

.px-10 {
    padding-left: var(--padding-10);
    padding-right: var(--padding-10);
}

.px-11 {
    padding-left: var(--padding-11);
    padding-right: var(--padding-11);
}

.px-12 {
    padding-left: var(--padding-12);
    padding-right: var(--padding-12);
}

.px-13 {
    padding-left: var(--padding-13);
    padding-right: var(--padding-13);
}

.px-14 {
    padding-left: var(--padding-14);
    padding-right: var(--padding-14);
}

.px-15 {
    padding-left: var(--padding-15);
    padding-right: var(--padding-15);
}

3xs styles

padding/3xs/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-3xs) {
    .px-0-3xs {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-3xs {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-3xs {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-3xs {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-3xs {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-3xs {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-3xs {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-3xs {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-3xs {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-3xs {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-3xs {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-3xs {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-3xs {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-3xs {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-3xs {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-3xs {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

2xs styles

padding/2xs/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-2xs) {
    .px-0-2xs {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-2xs {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-2xs {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-2xs {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-2xs {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-2xs {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-2xs {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-2xs {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-2xs {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-2xs {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-2xs {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-2xs {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-2xs {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-2xs {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-2xs {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-2xs {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

xs styles

padding/xs/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-xs) {
    .px-0-xs {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-xs {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-xs {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-xs {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-xs {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-xs {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-xs {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-xs {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-xs {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-xs {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-xs {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-xs {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-xs {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-xs {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-xs {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-xs {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

sm styles

padding/sm/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-sm) {
    .px-0-sm {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-sm {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-sm {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-sm {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-sm {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-sm {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-sm {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-sm {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-sm {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-sm {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-sm {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-sm {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-sm {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-sm {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-sm {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-sm {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

md styles

padding/md/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-md) {
    .px-0-md {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-md {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-md {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-md {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-md {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-md {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-md {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-md {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-md {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-md {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-md {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-md {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-md {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-md {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-md {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-md {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

lg styles

padding/lg/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-lg) {
    .px-0-lg {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-lg {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-lg {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-lg {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-lg {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-lg {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-lg {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-lg {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-lg {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-lg {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-lg {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-lg {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-lg {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-lg {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-lg {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-lg {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

xl styles

padding/xl/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-xl) {
    .px-0-xl {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-xl {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-xl {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-xl {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-xl {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-xl {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-xl {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-xl {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-xl {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-xl {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-xl {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-xl {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-xl {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-xl {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-xl {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-xl {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

2xl styles

padding/2xl/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-2xl) {
    .px-0-2xl {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-2xl {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-2xl {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-2xl {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-2xl {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-2xl {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-2xl {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-2xl {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-2xl {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-2xl {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-2xl {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-2xl {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-2xl {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-2xl {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-2xl {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-2xl {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

3xl styles

padding/3xl/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-3xl) {
    .px-0-3xl {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-3xl {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-3xl {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-3xl {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-3xl {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-3xl {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-3xl {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-3xl {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-3xl {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-3xl {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-3xl {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-3xl {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-3xl {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-3xl {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-3xl {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-3xl {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

4xl styles

padding/4xl/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-4xl) {
    .px-0-4xl {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-4xl {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-4xl {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-4xl {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-4xl {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-4xl {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-4xl {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-4xl {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-4xl {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-4xl {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-4xl {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-4xl {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-4xl {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-4xl {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-4xl {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-4xl {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

5xl styles

padding/5xl/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */

@media (--m-5xl) {
    .px-0-5xl {
        padding-left: var(--padding-0);
        padding-right: var(--padding-0);
    }

    .px-1-5xl {
        padding-left: var(--padding-1);
        padding-right: var(--padding-1);
    }

    .px-2-5xl {
        padding-left: var(--padding-2);
        padding-right: var(--padding-2);
    }

    .px-3-5xl {
        padding-left: var(--padding-3);
        padding-right: var(--padding-3);
    }

    .px-4-5xl {
        padding-left: var(--padding-4);
        padding-right: var(--padding-4);
    }

    .px-5-5xl {
        padding-left: var(--padding-5);
        padding-right: var(--padding-5);
    }

    .px-6-5xl {
        padding-left: var(--padding-6);
        padding-right: var(--padding-6);
    }

    .px-7-5xl {
        padding-left: var(--padding-7);
        padding-right: var(--padding-7);
    }

    .px-8-5xl {
        padding-left: var(--padding-8);
        padding-right: var(--padding-8);
    }

    .px-9-5xl {
        padding-left: var(--padding-9);
        padding-right: var(--padding-9);
    }

    .px-10-5xl {
        padding-left: var(--padding-10);
        padding-right: var(--padding-10);
    }

    .px-11-5xl {
        padding-left: var(--padding-11);
        padding-right: var(--padding-11);
    }

    .px-12-5xl {
        padding-left: var(--padding-12);
        padding-right: var(--padding-12);
    }

    .px-13-5xl {
        padding-left: var(--padding-13);
        padding-right: var(--padding-13);
    }

    .px-14-5xl {
        padding-left: var(--padding-14);
        padding-right: var(--padding-14);
    }

    .px-15-5xl {
        padding-left: var(--padding-15);
        padding-right: var(--padding-15);
    }
}

How to import into your CSS​

Source CSS​

Default styles​

3xs styles​

2xs styles​

xs styles​

sm styles​

md styles​

lg styles​

xl styles​

2xl styles​

3xl styles​

4xl styles​

5xl styles​