Skip to main content

First child padding styles

The first child padding styles allow you to modify the padding for the first child in an element.

Available padding styles​

  • All sides padding
  • Bottom padding
  • End padding
  • Horizontal padding
  • Start padding
  • Top padding
  • Vertical padding

Combined import​

You can import all of the first child padding styles with the following import:

@import 'cacao-css/dist/child-spacing/first-child/padding/combined-import.css';

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/child-spacing/first-child/padding/all.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical.css';

Granular imports​

If you only need to import a specific size of the first child padding styles then you can import the individual file.

All sides padding​

@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-0.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-1.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-2.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-3.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-4.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-5.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-6.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-7.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-8.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-9.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-10.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-11.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-12.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-13.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-14.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/all/all-15.css';

Bottom padding​

@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-0.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-1.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-2.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-3.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-4.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-5.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-6.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-7.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-8.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-9.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-10.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-11.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-12.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-13.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-14.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/bottom/bottom-15.css';

End padding​

@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-0.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-1.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-2.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-3.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-4.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-5.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-6.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-7.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-8.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-9.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-10.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-11.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-12.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-13.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-14.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/end/end-15.css';

Horizontal padding​

@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-0.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-1.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-2.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-3.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-4.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-5.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-6.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-7.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-8.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-9.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-10.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-11.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-12.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-13.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-14.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/horizontal/horizontal-15.css';

Start padding​

@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-0.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-1.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-2.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-3.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-4.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-5.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-6.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-7.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-8.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-9.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-10.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-11.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-12.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-13.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-14.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/start/start-15.css';

Top padding​

@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-0.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-1.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-2.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-3.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-4.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-5.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-6.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-7.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-8.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-9.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-10.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-11.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-12.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-13.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-14.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/top/top-15.css';

Vertical padding​

@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-0.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-1.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-2.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-3.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-4.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-5.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-6.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-7.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-8.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-9.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-10.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-11.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-12.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-13.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-14.css';
@import 'cacao-css/dist/child-spacing/first-child/padding/vertical/vertical-15.css';

Source css​

All sides padding​

child-spacing/first-child/padding/all.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-0 > *:first-child {
    padding: var(--child-spacing-0);
}

.first-child-p-1 > *:first-child {
    padding: var(--child-spacing-1);
}

.first-child-p-2 > *:first-child {
    padding: var(--child-spacing-2);
}

.first-child-p-3 > *:first-child {
    padding: var(--child-spacing-3);
}

.first-child-p-4 > *:first-child {
    padding: var(--child-spacing-4);
}

.first-child-p-5 > *:first-child {
    padding: var(--child-spacing-5);
}

.first-child-p-6 > *:first-child {
    padding: var(--child-spacing-6);
}

.first-child-p-7 > *:first-child {
    padding: var(--child-spacing-7);
}

.first-child-p-8 > *:first-child {
    padding: var(--child-spacing-8);
}

.first-child-p-9 > *:first-child {
    padding: var(--child-spacing-9);
}

.first-child-p-10 > *:first-child {
    padding: var(--child-spacing-10);
}

.first-child-p-11 > *:first-child {
    padding: var(--child-spacing-11);
}

.first-child-p-12 > *:first-child {
    padding: var(--child-spacing-12);
}

.first-child-p-13 > *:first-child {
    padding: var(--child-spacing-13);
}

.first-child-p-14 > *:first-child {
    padding: var(--child-spacing-14);
}

.first-child-p-15 > *:first-child {
    padding: var(--child-spacing-15);
}

All sides padding - 0​

child-spacing/first-child/padding/all/all-0.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-0 > *:first-child {
    padding: var(--child-spacing-0);
}

All sides padding - 1​

child-spacing/first-child/padding/all/all-1.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-1 > *:first-child {
    padding: var(--child-spacing-1);
}

All sides padding - 2​

child-spacing/first-child/padding/all/all-2.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-2 > *:first-child {
    padding: var(--child-spacing-2);
}

All sides padding - 3​

child-spacing/first-child/padding/all/all-3.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-3 > *:first-child {
    padding: var(--child-spacing-3);
}

All sides padding - 4​

child-spacing/first-child/padding/all/all-4.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-4 > *:first-child {
    padding: var(--child-spacing-4);
}

All sides padding - 5​

child-spacing/first-child/padding/all/all-5.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-5 > *:first-child {
    padding: var(--child-spacing-5);
}

All sides padding - 6​

child-spacing/first-child/padding/all/all-6.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-6 > *:first-child {
    padding: var(--child-spacing-6);
}

All sides padding - 7​

child-spacing/first-child/padding/all/all-7.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-7 > *:first-child {
    padding: var(--child-spacing-7);
}

All sides padding - 8​

child-spacing/first-child/padding/all/all-8.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-8 > *:first-child {
    padding: var(--child-spacing-8);
}

All sides padding - 9​

child-spacing/first-child/padding/all/all-9.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-9 > *:first-child {
    padding: var(--child-spacing-9);
}

All sides padding - 10​

child-spacing/first-child/padding/all/all-10.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-10 > *:first-child {
    padding: var(--child-spacing-10);
}

All sides padding - 11​

child-spacing/first-child/padding/all/all-11.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-11 > *:first-child {
    padding: var(--child-spacing-11);
}

All sides padding - 12​

child-spacing/first-child/padding/all/all-12.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-12 > *:first-child {
    padding: var(--child-spacing-12);
}

All sides padding - 13​

child-spacing/first-child/padding/all/all-13.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-13 > *:first-child {
    padding: var(--child-spacing-13);
}

All sides padding - 14​

child-spacing/first-child/padding/all/all-14.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-14 > *:first-child {
    padding: var(--child-spacing-14);
}

All sides padding - 15​

child-spacing/first-child/padding/all/all-15.css
/* =========================================================================== *
   First child all sides padding utilities
 * =========================================================================== */


.first-child-p-15 > *:first-child {
    padding: var(--child-spacing-15);
}

Bottom padding​

child-spacing/first-child/padding/bottom.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-0 > *:first-child {
    padding-bottom: var(--child-spacing-0);
}

.first-child-pb-1 > *:first-child {
    padding-bottom: var(--child-spacing-1);
}

.first-child-pb-2 > *:first-child {
    padding-bottom: var(--child-spacing-2);
}

.first-child-pb-3 > *:first-child {
    padding-bottom: var(--child-spacing-3);
}

.first-child-pb-4 > *:first-child {
    padding-bottom: var(--child-spacing-4);
}

.first-child-pb-5 > *:first-child {
    padding-bottom: var(--child-spacing-5);
}

.first-child-pb-6 > *:first-child {
    padding-bottom: var(--child-spacing-6);
}

.first-child-pb-7 > *:first-child {
    padding-bottom: var(--child-spacing-7);
}

.first-child-pb-8 > *:first-child {
    padding-bottom: var(--child-spacing-8);
}

.first-child-pb-9 > *:first-child {
    padding-bottom: var(--child-spacing-9);
}

.first-child-pb-10 > *:first-child {
    padding-bottom: var(--child-spacing-10);
}

.first-child-pb-11 > *:first-child {
    padding-bottom: var(--child-spacing-11);
}

.first-child-pb-12 > *:first-child {
    padding-bottom: var(--child-spacing-12);
}

.first-child-pb-13 > *:first-child {
    padding-bottom: var(--child-spacing-13);
}

.first-child-pb-14 > *:first-child {
    padding-bottom: var(--child-spacing-14);
}

.first-child-pb-15 > *:first-child {
    padding-bottom: var(--child-spacing-15);
}

Bottom padding - 0​

child-spacing/first-child/padding/bottom/bottom-0.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-0 > *:first-child {
    padding-bottom: var(--child-spacing-0);
}

Bottom padding - 1​

child-spacing/first-child/padding/bottom/bottom-1.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-1 > *:first-child {
    padding-bottom: var(--child-spacing-1);
}

Bottom padding - 2​

child-spacing/first-child/padding/bottom/bottom-2.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-2 > *:first-child {
    padding-bottom: var(--child-spacing-2);
}

Bottom padding - 3​

child-spacing/first-child/padding/bottom/bottom-3.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-3 > *:first-child {
    padding-bottom: var(--child-spacing-3);
}

Bottom padding - 4​

child-spacing/first-child/padding/bottom/bottom-4.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-4 > *:first-child {
    padding-bottom: var(--child-spacing-4);
}

Bottom padding - 5​

child-spacing/first-child/padding/bottom/bottom-5.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-5 > *:first-child {
    padding-bottom: var(--child-spacing-5);
}

Bottom padding - 6​

child-spacing/first-child/padding/bottom/bottom-6.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-6 > *:first-child {
    padding-bottom: var(--child-spacing-6);
}

Bottom padding - 7​

child-spacing/first-child/padding/bottom/bottom-7.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-7 > *:first-child {
    padding-bottom: var(--child-spacing-7);
}

Bottom padding - 8​

child-spacing/first-child/padding/bottom/bottom-8.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-8 > *:first-child {
    padding-bottom: var(--child-spacing-8);
}

Bottom padding - 9​

child-spacing/first-child/padding/bottom/bottom-9.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-9 > *:first-child {
    padding-bottom: var(--child-spacing-9);
}

Bottom padding - 10​

child-spacing/first-child/padding/bottom/bottom-10.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-10 > *:first-child {
    padding-bottom: var(--child-spacing-10);
}

Bottom padding - 11​

child-spacing/first-child/padding/bottom/bottom-11.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-11 > *:first-child {
    padding-bottom: var(--child-spacing-11);
}

Bottom padding - 12​

child-spacing/first-child/padding/bottom/bottom-12.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-12 > *:first-child {
    padding-bottom: var(--child-spacing-12);
}

Bottom padding - 13​

child-spacing/first-child/padding/bottom/bottom-13.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-13 > *:first-child {
    padding-bottom: var(--child-spacing-13);
}

Bottom padding - 14​

child-spacing/first-child/padding/bottom/bottom-14.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-14 > *:first-child {
    padding-bottom: var(--child-spacing-14);
}

Bottom padding - 15​

child-spacing/first-child/padding/bottom/bottom-15.css
/* =========================================================================== *
   First child bottom padding utilities
 * =========================================================================== */


.first-child-pb-15 > *:first-child {
    padding-bottom: var(--child-spacing-15);
}

End padding​

child-spacing/first-child/padding/end.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-0 > *:first-child {
    padding-right: var(--child-spacing-0);
}

.first-child-pe-1 > *:first-child {
    padding-right: var(--child-spacing-1);
}

.first-child-pe-2 > *:first-child {
    padding-right: var(--child-spacing-2);
}

.first-child-pe-3 > *:first-child {
    padding-right: var(--child-spacing-3);
}

.first-child-pe-4 > *:first-child {
    padding-right: var(--child-spacing-4);
}

.first-child-pe-5 > *:first-child {
    padding-right: var(--child-spacing-5);
}

.first-child-pe-6 > *:first-child {
    padding-right: var(--child-spacing-6);
}

.first-child-pe-7 > *:first-child {
    padding-right: var(--child-spacing-7);
}

.first-child-pe-8 > *:first-child {
    padding-right: var(--child-spacing-8);
}

.first-child-pe-9 > *:first-child {
    padding-right: var(--child-spacing-9);
}

.first-child-pe-10 > *:first-child {
    padding-right: var(--child-spacing-10);
}

.first-child-pe-11 > *:first-child {
    padding-right: var(--child-spacing-11);
}

.first-child-pe-12 > *:first-child {
    padding-right: var(--child-spacing-12);
}

.first-child-pe-13 > *:first-child {
    padding-right: var(--child-spacing-13);
}

.first-child-pe-14 > *:first-child {
    padding-right: var(--child-spacing-14);
}

.first-child-pe-15 > *:first-child {
    padding-right: var(--child-spacing-15);
}

End padding - 0​

child-spacing/first-child/padding/end/end-0.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-0 > *:first-child {
    padding-right: var(--child-spacing-0);
}

End padding - 1​

child-spacing/first-child/padding/end/end-1.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-1 > *:first-child {
    padding-right: var(--child-spacing-1);
}

End padding - 2​

child-spacing/first-child/padding/end/end-2.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-2 > *:first-child {
    padding-right: var(--child-spacing-2);
}

End padding - 3​

child-spacing/first-child/padding/end/end-3.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-3 > *:first-child {
    padding-right: var(--child-spacing-3);
}

End padding - 4​

child-spacing/first-child/padding/end/end-4.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-4 > *:first-child {
    padding-right: var(--child-spacing-4);
}

End padding - 5​

child-spacing/first-child/padding/end/end-5.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-5 > *:first-child {
    padding-right: var(--child-spacing-5);
}

End padding - 6​

child-spacing/first-child/padding/end/end-6.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-6 > *:first-child {
    padding-right: var(--child-spacing-6);
}

End padding - 7​

child-spacing/first-child/padding/end/end-7.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-7 > *:first-child {
    padding-right: var(--child-spacing-7);
}

End padding - 8​

child-spacing/first-child/padding/end/end-8.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-8 > *:first-child {
    padding-right: var(--child-spacing-8);
}

End padding - 9​

child-spacing/first-child/padding/end/end-9.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-9 > *:first-child {
    padding-right: var(--child-spacing-9);
}

End padding - 10​

child-spacing/first-child/padding/end/end-10.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-10 > *:first-child {
    padding-right: var(--child-spacing-10);
}

End padding - 11​

child-spacing/first-child/padding/end/end-11.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-11 > *:first-child {
    padding-right: var(--child-spacing-11);
}

End padding - 12​

child-spacing/first-child/padding/end/end-12.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-12 > *:first-child {
    padding-right: var(--child-spacing-12);
}

End padding - 13​

child-spacing/first-child/padding/end/end-13.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-13 > *:first-child {
    padding-right: var(--child-spacing-13);
}

End padding - 14​

child-spacing/first-child/padding/end/end-14.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-14 > *:first-child {
    padding-right: var(--child-spacing-14);
}

End padding - 15​

child-spacing/first-child/padding/end/end-15.css
/* =========================================================================== *
   First child end padding utilities
 * =========================================================================== */


.first-child-pe-15 > *:first-child {
    padding-right: var(--child-spacing-15);
}

Horizontal padding​

child-spacing/first-child/padding/horizontal.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-0 > *:first-child {
    padding-left: var(--child-spacing-0);
    padding-right: var(--child-spacing-0);
}

.first-child-px-1 > *:first-child {
    padding-left: var(--child-spacing-1);
    padding-right: var(--child-spacing-1);
}

.first-child-px-2 > *:first-child {
    padding-left: var(--child-spacing-2);
    padding-right: var(--child-spacing-2);
}

.first-child-px-3 > *:first-child {
    padding-left: var(--child-spacing-3);
    padding-right: var(--child-spacing-3);
}

.first-child-px-4 > *:first-child {
    padding-left: var(--child-spacing-4);
    padding-right: var(--child-spacing-4);
}

.first-child-px-5 > *:first-child {
    padding-left: var(--child-spacing-5);
    padding-right: var(--child-spacing-5);
}

.first-child-px-6 > *:first-child {
    padding-left: var(--child-spacing-6);
    padding-right: var(--child-spacing-6);
}

.first-child-px-7 > *:first-child {
    padding-left: var(--child-spacing-7);
    padding-right: var(--child-spacing-7);
}

.first-child-px-8 > *:first-child {
    padding-left: var(--child-spacing-8);
    padding-right: var(--child-spacing-8);
}

.first-child-px-9 > *:first-child {
    padding-left: var(--child-spacing-9);
    padding-right: var(--child-spacing-9);
}

.first-child-px-10 > *:first-child {
    padding-left: var(--child-spacing-10);
    padding-right: var(--child-spacing-10);
}

.first-child-px-11 > *:first-child {
    padding-left: var(--child-spacing-11);
    padding-right: var(--child-spacing-11);
}

.first-child-px-12 > *:first-child {
    padding-left: var(--child-spacing-12);
    padding-right: var(--child-spacing-12);
}

.first-child-px-13 > *:first-child {
    padding-left: var(--child-spacing-13);
    padding-right: var(--child-spacing-13);
}

.first-child-px-14 > *:first-child {
    padding-left: var(--child-spacing-14);
    padding-right: var(--child-spacing-14);
}

.first-child-px-15 > *:first-child {
    padding-left: var(--child-spacing-15);
    padding-right: var(--child-spacing-15);
}

Horizontal padding - 0​

child-spacing/first-child/padding/horizontal/horizontal-0.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-0 > *:first-child {
    padding-left: var(--child-spacing-0);
    padding-right: var(--child-spacing-0);
}

Horizontal padding - 1​

child-spacing/first-child/padding/horizontal/horizontal-1.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-1 > *:first-child {
    padding-left: var(--child-spacing-1);
    padding-right: var(--child-spacing-1);
}

Horizontal padding - 2​

child-spacing/first-child/padding/horizontal/horizontal-2.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-2 > *:first-child {
    padding-left: var(--child-spacing-2);
    padding-right: var(--child-spacing-2);
}

Horizontal padding - 3​

child-spacing/first-child/padding/horizontal/horizontal-3.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-3 > *:first-child {
    padding-left: var(--child-spacing-3);
    padding-right: var(--child-spacing-3);
}

Horizontal padding - 4​

child-spacing/first-child/padding/horizontal/horizontal-4.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-4 > *:first-child {
    padding-left: var(--child-spacing-4);
    padding-right: var(--child-spacing-4);
}

Horizontal padding - 5​

child-spacing/first-child/padding/horizontal/horizontal-5.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-5 > *:first-child {
    padding-left: var(--child-spacing-5);
    padding-right: var(--child-spacing-5);
}

Horizontal padding - 6​

child-spacing/first-child/padding/horizontal/horizontal-6.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-6 > *:first-child {
    padding-left: var(--child-spacing-6);
    padding-right: var(--child-spacing-6);
}

Horizontal padding - 7​

child-spacing/first-child/padding/horizontal/horizontal-7.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-7 > *:first-child {
    padding-left: var(--child-spacing-7);
    padding-right: var(--child-spacing-7);
}

Horizontal padding - 8​

child-spacing/first-child/padding/horizontal/horizontal-8.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-8 > *:first-child {
    padding-left: var(--child-spacing-8);
    padding-right: var(--child-spacing-8);
}

Horizontal padding - 9​

child-spacing/first-child/padding/horizontal/horizontal-9.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-9 > *:first-child {
    padding-left: var(--child-spacing-9);
    padding-right: var(--child-spacing-9);
}

Horizontal padding - 10​

child-spacing/first-child/padding/horizontal/horizontal-10.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-10 > *:first-child {
    padding-left: var(--child-spacing-10);
    padding-right: var(--child-spacing-10);
}

Horizontal padding - 11​

child-spacing/first-child/padding/horizontal/horizontal-11.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-11 > *:first-child {
    padding-left: var(--child-spacing-11);
    padding-right: var(--child-spacing-11);
}

Horizontal padding - 12​

child-spacing/first-child/padding/horizontal/horizontal-12.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-12 > *:first-child {
    padding-left: var(--child-spacing-12);
    padding-right: var(--child-spacing-12);
}

Horizontal padding - 13​

child-spacing/first-child/padding/horizontal/horizontal-13.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-13 > *:first-child {
    padding-left: var(--child-spacing-13);
    padding-right: var(--child-spacing-13);
}

Horizontal padding - 14​

child-spacing/first-child/padding/horizontal/horizontal-14.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-14 > *:first-child {
    padding-left: var(--child-spacing-14);
    padding-right: var(--child-spacing-14);
}

Horizontal padding - 15​

child-spacing/first-child/padding/horizontal/horizontal-15.css
/* =========================================================================== *
   Horizontal padding utilities
 * =========================================================================== */


.first-child-px-15 > *:first-child {
    padding-left: var(--child-spacing-15);
    padding-right: var(--child-spacing-15);
}

Start padding​

child-spacing/first-child/padding/start.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-0 > *:first-child {
    padding-left: var(--child-spacing-0);
}

.first-child-ps-1 > *:first-child {
    padding-left: var(--child-spacing-1);
}

.first-child-ps-2 > *:first-child {
    padding-left: var(--child-spacing-2);
}

.first-child-ps-3 > *:first-child {
    padding-left: var(--child-spacing-3);
}

.first-child-ps-4 > *:first-child {
    padding-left: var(--child-spacing-4);
}

.first-child-ps-5 > *:first-child {
    padding-left: var(--child-spacing-5);
}

.first-child-ps-6 > *:first-child {
    padding-left: var(--child-spacing-6);
}

.first-child-ps-7 > *:first-child {
    padding-left: var(--child-spacing-7);
}

.first-child-ps-8 > *:first-child {
    padding-left: var(--child-spacing-8);
}

.first-child-ps-9 > *:first-child {
    padding-left: var(--child-spacing-9);
}

.first-child-ps-10 > *:first-child {
    padding-left: var(--child-spacing-10);
}

.first-child-ps-11 > *:first-child {
    padding-left: var(--child-spacing-11);
}

.first-child-ps-12 > *:first-child {
    padding-left: var(--child-spacing-12);
}

.first-child-ps-13 > *:first-child {
    padding-left: var(--child-spacing-13);
}

.first-child-ps-14 > *:first-child {
    padding-left: var(--child-spacing-14);
}

.first-child-ps-15 > *:first-child {
    padding-left: var(--child-spacing-15);
}

Start padding - 0​

child-spacing/first-child/padding/start/start-0.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-0 > *:first-child {
    padding-left: var(--child-spacing-0);
}

Start padding - 1​

child-spacing/first-child/padding/start/start-1.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-1 > *:first-child {
    padding-left: var(--child-spacing-1);
}

Start padding - 2​

child-spacing/first-child/padding/start/start-2.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-2 > *:first-child {
    padding-left: var(--child-spacing-2);
}

Start padding - 3​

child-spacing/first-child/padding/start/start-3.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-3 > *:first-child {
    padding-left: var(--child-spacing-3);
}

Start padding - 4​

child-spacing/first-child/padding/start/start-4.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-4 > *:first-child {
    padding-left: var(--child-spacing-4);
}

Start padding - 5​

child-spacing/first-child/padding/start/start-5.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-5 > *:first-child {
    padding-left: var(--child-spacing-5);
}

Start padding - 6​

child-spacing/first-child/padding/start/start-6.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-6 > *:first-child {
    padding-left: var(--child-spacing-6);
}

Start padding - 7​

child-spacing/first-child/padding/start/start-7.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-7 > *:first-child {
    padding-left: var(--child-spacing-7);
}

Start padding - 8​

child-spacing/first-child/padding/start/start-8.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-8 > *:first-child {
    padding-left: var(--child-spacing-8);
}

Start padding - 9​

child-spacing/first-child/padding/start/start-9.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-9 > *:first-child {
    padding-left: var(--child-spacing-9);
}

Start padding - 10​

child-spacing/first-child/padding/start/start-10.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-10 > *:first-child {
    padding-left: var(--child-spacing-10);
}

Start padding - 11​

child-spacing/first-child/padding/start/start-11.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-11 > *:first-child {
    padding-left: var(--child-spacing-11);
}

Start padding - 12​

child-spacing/first-child/padding/start/start-12.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-12 > *:first-child {
    padding-left: var(--child-spacing-12);
}

Start padding - 13​

child-spacing/first-child/padding/start/start-13.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-13 > *:first-child {
    padding-left: var(--child-spacing-13);
}

Start padding - 14​

child-spacing/first-child/padding/start/start-14.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-14 > *:first-child {
    padding-left: var(--child-spacing-14);
}

Start padding - 15​

child-spacing/first-child/padding/start/start-15.css
/* =========================================================================== *
   First child start padding utilities
 * =========================================================================== */


.first-child-ps-15 > *:first-child {
    padding-left: var(--child-spacing-15);
}

Top padding​

child-spacing/first-child/padding/top.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-0 > *:first-child {
    padding-top: var(--child-spacing-0);
}

.first-child-pt-1 > *:first-child {
    padding-top: var(--child-spacing-1);
}

.first-child-pt-2 > *:first-child {
    padding-top: var(--child-spacing-2);
}

.first-child-pt-3 > *:first-child {
    padding-top: var(--child-spacing-3);
}

.first-child-pt-4 > *:first-child {
    padding-top: var(--child-spacing-4);
}

.first-child-pt-5 > *:first-child {
    padding-top: var(--child-spacing-5);
}

.first-child-pt-6 > *:first-child {
    padding-top: var(--child-spacing-6);
}

.first-child-pt-7 > *:first-child {
    padding-top: var(--child-spacing-7);
}

.first-child-pt-8 > *:first-child {
    padding-top: var(--child-spacing-8);
}

.first-child-pt-9 > *:first-child {
    padding-top: var(--child-spacing-9);
}

.first-child-pt-10 > *:first-child {
    padding-top: var(--child-spacing-10);
}

.first-child-pt-11 > *:first-child {
    padding-top: var(--child-spacing-11);
}

.first-child-pt-12 > *:first-child {
    padding-top: var(--child-spacing-12);
}

.first-child-pt-13 > *:first-child {
    padding-top: var(--child-spacing-13);
}

.first-child-pt-14 > *:first-child {
    padding-top: var(--child-spacing-14);
}

.first-child-pt-15 > *:first-child {
    padding-top: var(--child-spacing-15);
}

Top padding - 0​

child-spacing/first-child/padding/top/top-0.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-0 > *:first-child {
    padding-top: var(--child-spacing-0);
}

Top padding - 1​

child-spacing/first-child/padding/top/top-1.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-1 > *:first-child {
    padding-top: var(--child-spacing-1);
}

Top padding - 2​

child-spacing/first-child/padding/top/top-2.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-2 > *:first-child {
    padding-top: var(--child-spacing-2);
}

Top padding - 3​

child-spacing/first-child/padding/top/top-3.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-3 > *:first-child {
    padding-top: var(--child-spacing-3);
}

Top padding - 4​

child-spacing/first-child/padding/top/top-4.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-4 > *:first-child {
    padding-top: var(--child-spacing-4);
}

Top padding - 5​

child-spacing/first-child/padding/top/top-5.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-5 > *:first-child {
    padding-top: var(--child-spacing-5);
}

Top padding - 6​

child-spacing/first-child/padding/top/top-6.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-6 > *:first-child {
    padding-top: var(--child-spacing-6);
}

Top padding - 7​

child-spacing/first-child/padding/top/top-7.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-7 > *:first-child {
    padding-top: var(--child-spacing-7);
}

Top padding - 8​

child-spacing/first-child/padding/top/top-8.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-8 > *:first-child {
    padding-top: var(--child-spacing-8);
}

Top padding - 9​

child-spacing/first-child/padding/top/top-9.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-9 > *:first-child {
    padding-top: var(--child-spacing-9);
}

Top padding - 10​

child-spacing/first-child/padding/top/top-10.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-10 > *:first-child {
    padding-top: var(--child-spacing-10);
}

Top padding - 11​

child-spacing/first-child/padding/top/top-11.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-11 > *:first-child {
    padding-top: var(--child-spacing-11);
}

Top padding - 12​

child-spacing/first-child/padding/top/top-12.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-12 > *:first-child {
    padding-top: var(--child-spacing-12);
}

Top padding - 13​

child-spacing/first-child/padding/top/top-13.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-13 > *:first-child {
    padding-top: var(--child-spacing-13);
}

Top padding - 14​

child-spacing/first-child/padding/top/top-14.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-14 > *:first-child {
    padding-top: var(--child-spacing-14);
}

Top padding - 15​

child-spacing/first-child/padding/top/top-15.css
/* =========================================================================== *
   First child top padding utilities
 * =========================================================================== */


.first-child-pt-15 > *:first-child {
    padding-top: var(--child-spacing-15);
}

Vertical padding​

child-spacing/first-child/padding/vertical.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-0 > *:first-child {
    padding-top: var(--child-spacing-0);
    padding-bottom: var(--child-spacing-0);
}

.first-child-py-1 > *:first-child {
    padding-top: var(--child-spacing-1);
    padding-bottom: var(--child-spacing-1);
}

.first-child-py-2 > *:first-child {
    padding-top: var(--child-spacing-2);
    padding-bottom: var(--child-spacing-2);
}

.first-child-py-3 > *:first-child {
    padding-top: var(--child-spacing-3);
    padding-bottom: var(--child-spacing-3);
}

.first-child-py-4 > *:first-child {
    padding-top: var(--child-spacing-4);
    padding-bottom: var(--child-spacing-4);
}

.first-child-py-5 > *:first-child {
    padding-top: var(--child-spacing-5);
    padding-bottom: var(--child-spacing-5);
}

.first-child-py-6 > *:first-child {
    padding-top: var(--child-spacing-6);
    padding-bottom: var(--child-spacing-6);
}

.first-child-py-7 > *:first-child {
    padding-top: var(--child-spacing-7);
    padding-bottom: var(--child-spacing-7);
}

.first-child-py-8 > *:first-child {
    padding-top: var(--child-spacing-8);
    padding-bottom: var(--child-spacing-8);
}

.first-child-py-9 > *:first-child {
    padding-top: var(--child-spacing-9);
    padding-bottom: var(--child-spacing-9);
}

.first-child-py-10 > *:first-child {
    padding-top: var(--child-spacing-10);
    padding-bottom: var(--child-spacing-10);
}

.first-child-py-11 > *:first-child {
    padding-top: var(--child-spacing-11);
    padding-bottom: var(--child-spacing-11);
}

.first-child-py-12 > *:first-child {
    padding-top: var(--child-spacing-12);
    padding-bottom: var(--child-spacing-12);
}

.first-child-py-13 > *:first-child {
    padding-top: var(--child-spacing-13);
    padding-bottom: var(--child-spacing-13);
}

.first-child-py-14 > *:first-child {
    padding-top: var(--child-spacing-14);
    padding-bottom: var(--child-spacing-14);
}

.first-child-py-15 > *:first-child {
    padding-top: var(--child-spacing-15);
    padding-bottom: var(--child-spacing-15);
}

Vertical padding - 0​

child-spacing/first-child/padding/vertical/vertical-0.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-0 > *:first-child {
    padding-top: var(--child-spacing-0);
    padding-bottom: var(--child-spacing-0);
}

Vertical padding - 1​

child-spacing/first-child/padding/vertical/vertical-1.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-1 > *:first-child {
    padding-top: var(--child-spacing-1);
    padding-bottom: var(--child-spacing-1);
}

Vertical padding - 2​

child-spacing/first-child/padding/vertical/vertical-2.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-2 > *:first-child {
    padding-top: var(--child-spacing-2);
    padding-bottom: var(--child-spacing-2);
}

Vertical padding - 3​

child-spacing/first-child/padding/vertical/vertical-3.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-3 > *:first-child {
    padding-top: var(--child-spacing-3);
    padding-bottom: var(--child-spacing-3);
}

Vertical padding - 4​

child-spacing/first-child/padding/vertical/vertical-4.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-4 > *:first-child {
    padding-top: var(--child-spacing-4);
    padding-bottom: var(--child-spacing-4);
}

Vertical padding - 5​

child-spacing/first-child/padding/vertical/vertical-5.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-5 > *:first-child {
    padding-top: var(--child-spacing-5);
    padding-bottom: var(--child-spacing-5);
}

Vertical padding - 6​

child-spacing/first-child/padding/vertical/vertical-6.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-6 > *:first-child {
    padding-top: var(--child-spacing-6);
    padding-bottom: var(--child-spacing-6);
}

Vertical padding - 7​

child-spacing/first-child/padding/vertical/vertical-7.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-7 > *:first-child {
    padding-top: var(--child-spacing-7);
    padding-bottom: var(--child-spacing-7);
}

Vertical padding - 8​

child-spacing/first-child/padding/vertical/vertical-8.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-8 > *:first-child {
    padding-top: var(--child-spacing-8);
    padding-bottom: var(--child-spacing-8);
}

Vertical padding - 9​

child-spacing/first-child/padding/vertical/vertical-9.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-9 > *:first-child {
    padding-top: var(--child-spacing-9);
    padding-bottom: var(--child-spacing-9);
}

Vertical padding - 10​

child-spacing/first-child/padding/vertical/vertical-10.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-10 > *:first-child {
    padding-top: var(--child-spacing-10);
    padding-bottom: var(--child-spacing-10);
}

Vertical padding - 11​

child-spacing/first-child/padding/vertical/vertical-11.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-11 > *:first-child {
    padding-top: var(--child-spacing-11);
    padding-bottom: var(--child-spacing-11);
}

Vertical padding - 12​

child-spacing/first-child/padding/vertical/vertical-12.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-12 > *:first-child {
    padding-top: var(--child-spacing-12);
    padding-bottom: var(--child-spacing-12);
}

Vertical padding - 13​

child-spacing/first-child/padding/vertical/vertical-13.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-13 > *:first-child {
    padding-top: var(--child-spacing-13);
    padding-bottom: var(--child-spacing-13);
}

Vertical padding - 14​

child-spacing/first-child/padding/vertical/vertical-14.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-14 > *:first-child {
    padding-top: var(--child-spacing-14);
    padding-bottom: var(--child-spacing-14);
}

Vertical padding - 15​

child-spacing/first-child/padding/vertical/vertical-15.css
/* =========================================================================== *
   First child vertical padding utilities
 * =========================================================================== */


.first-child-py-15 > *:first-child {
    padding-top: var(--child-spacing-15);
    padding-bottom: var(--child-spacing-15);
}