style-forge.helpers/src/padding.css

Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.

.p { padding: var(--sf-rem) }
.p\:0 { padding: 0 }
.p\:xs { padding: var(--sf-rem-xs) }
.p\:sm { padding: var(--sf-rem-sm) }
.p\:s { padding: var(--sf-rem-s) }
.p\:ms { padding: var(--sf-rem-ms) }
.p\:ls { padding: var(--sf-rem-ls) }
.p\:md { padding: var(--sf-rem-md) }
.p\:lg { padding: var(--sf-rem-lg) }
.p\:xl { padding: var(--sf-rem-xl) }
.p\:2xl { padding: var(--sf-rem-2xl) }
.p\:3xl { padding: var(--sf-rem-3xl) }
.p\:4xl { padding: var(--sf-rem-4xl) }
.p\:5xl { padding: var(--sf-rem-5xl) }
.p\:6xl { padding: var(--sf-rem-6xl) }
.p\:7xl { padding: var(--sf-rem-7xl) }
.p\:8xl { padding: var(--sf-rem-8xl) }
.p\:9xl { padding: var(--sf-rem-9xl) }
.p\:10xl { padding: var(--sf-rem-10xl) }
.p\:11xl { padding: var(--sf-rem-11xl) }
.p\:12xl { padding: var(--sf-rem-12xl) }

.pt { padding-block-start: var(--sf-rem) }
.pt\:0 { padding-block-start: 0 }
.pt\:xs { padding-block-start: var(--sf-rem-xs) }
.pt\:sm { padding-block-start: var(--sf-rem-sm) }
.pt\:s { padding-block-start: var(--sf-rem-s) }
.pt\:ms { padding-block-start: var(--sf-rem-ms) }
.pt\:ls { padding-block-start: var(--sf-rem-ls) }
.pt\:md { padding-block-start: var(--sf-rem-md) }
.pt\:lg { padding-block-start: var(--sf-rem-lg) }
.pt\:xl { padding-block-start: var(--sf-rem-xl) }
.pt\:2xl { padding-block-start: var(--sf-rem-2xl) }
.pt\:3xl { padding-block-start: var(--sf-rem-3xl) }
.pt\:4xl { padding-block-start: var(--sf-rem-4xl) }
.pt\:5xl { padding-block-start: var(--sf-rem-5xl) }
.pt\:6xl { padding-block-start: var(--sf-rem-6xl) }
.pt\:7xl { padding-block-start: var(--sf-rem-7xl) }
.pt\:8xl { padding-block-start: var(--sf-rem-8xl) }
.pt\:9xl { padding-block-start: var(--sf-rem-9xl) }
.pt\:10xl { padding-block-start: var(--sf-rem-10xl) }
.pt\:11xl { padding-block-start: var(--sf-rem-11xl) }
.pt\:12xl { padding-block-start: var(--sf-rem-12xl) }

.pr { padding-inline-end: var(--sf-rem) }
.pr\:0 { padding-inline-end: 0 }
.pr\:xs { padding-inline-end: var(--sf-rem-xs) }
.pr\:sm { padding-inline-end: var(--sf-rem-sm) }
.pr\:s { padding-inline-end: var(--sf-rem-s) }
.pr\:ms { padding-inline-end: var(--sf-rem-ms) }
.pr\:ls { padding-inline-end: var(--sf-rem-ls) }
.pr\:md { padding-inline-end: var(--sf-rem-md) }
.pr\:lg { padding-inline-end: var(--sf-rem-lg) }
.pr\:xl { padding-inline-end: var(--sf-rem-xl) }
.pr\:2xl { padding-inline-end: var(--sf-rem-2xl) }
.pr\:3xl { padding-inline-end: var(--sf-rem-3xl) }
.pr\:4xl { padding-inline-end: var(--sf-rem-4xl) }
.pr\:5xl { padding-inline-end: var(--sf-rem-5xl) }
.pr\:6xl { padding-inline-end: var(--sf-rem-6xl) }
.pr\:7xl { padding-inline-end: var(--sf-rem-7xl) }
.pr\:8xl { padding-inline-end: var(--sf-rem-8xl) }
.pr\:9xl { padding-inline-end: var(--sf-rem-9xl) }
.pr\:10xl { padding-inline-end: var(--sf-rem-10xl) }
.pr\:11xl { padding-inline-end: var(--sf-rem-11xl) }
.pr\:12xl { padding-inline-end: var(--sf-rem-12xl) }

.pb { padding-block-end: var(--sf-rem) }
.pb\:0 { padding-block-end: 0 }
.pb\:xs { padding-block-end: var(--sf-rem-xs) }
.pb\:sm { padding-block-end: var(--sf-rem-sm) }
.pb\:s { padding-block-end: var(--sf-rem-s) }
.pb\:ms { padding-block-end: var(--sf-rem-ms) }
.pb\:ls { padding-block-end: var(--sf-rem-ls) }
.pb\:md { padding-block-end: var(--sf-rem-md) }
.pb\:lg { padding-block-end: var(--sf-rem-lg) }
.pb\:xl { padding-block-end: var(--sf-rem-xl) }
.pb\:2xl { padding-block-end: var(--sf-rem-2xl) }
.pb\:3xl { padding-block-end: var(--sf-rem-3xl) }
.pb\:4xl { padding-block-end: var(--sf-rem-4xl) }
.pb\:5xl { padding-block-end: var(--sf-rem-5xl) }
.pb\:6xl { padding-block-end: var(--sf-rem-6xl) }
.pb\:7xl { padding-block-end: var(--sf-rem-7xl) }
.pb\:8xl { padding-block-end: var(--sf-rem-8xl) }
.pb\:9xl { padding-block-end: var(--sf-rem-9xl) }
.pb\:10xl { padding-block-end: var(--sf-rem-10xl) }
.pb\:11xl { padding-block-end: var(--sf-rem-11xl) }
.pb\:12xl { padding-block-end: var(--sf-rem-12xl) }

.pl { padding-inline-start: var(--sf-rem) }
.pl\:0 { padding-inline-start: 0 }
.pl\:xs { padding-inline-start: var(--sf-rem-xs) }
.pl\:sm { padding-inline-start: var(--sf-rem-sm) }
.pl\:s { padding-inline-start: var(--sf-rem-s) }
.pl\:ms { padding-inline-start: var(--sf-rem-ms) }
.pl\:ls { padding-inline-start: var(--sf-rem-ls) }
.pl\:md { padding-inline-start: var(--sf-rem-md) }
.pl\:lg { padding-inline-start: var(--sf-rem-lg) }
.pl\:xl { padding-inline-start: var(--sf-rem-xl) }
.pl\:2xl { padding-inline-start: var(--sf-rem-2xl) }
.pl\:3xl { padding-inline-start: var(--sf-rem-3xl) }
.pl\:4xl { padding-inline-start: var(--sf-rem-4xl) }
.pl\:5xl { padding-inline-start: var(--sf-rem-5xl) }
.pl\:6xl { padding-inline-start: var(--sf-rem-6xl) }
.pl\:7xl { padding-inline-start: var(--sf-rem-7xl) }
.pl\:8xl { padding-inline-start: var(--sf-rem-8xl) }
.pl\:9xl { padding-inline-start: var(--sf-rem-9xl) }
.pl\:10xl { padding-inline-start: var(--sf-rem-10xl) }
.pl\:11xl { padding-inline-start: var(--sf-rem-11xl) }
.pl\:12xl { padding-inline-start: var(--sf-rem-12xl) }

.px { padding-inline: var(--sf-rem) }
.px\:0 { padding-inline: 0 }
.px\:xs { padding-inline: var(--sf-rem-xs) }
.px\:sm { padding-inline: var(--sf-rem-sm) }
.px\:s { padding-inline: var(--sf-rem-s) }
.px\:ms { padding-inline: var(--sf-rem-ms) }
.px\:ls { padding-inline: var(--sf-rem-ls) }
.px\:md { padding-inline: var(--sf-rem-md) }
.px\:lg { padding-inline: var(--sf-rem-lg) }
.px\:xl { padding-inline: var(--sf-rem-xl) }
.px\:2xl { padding-inline: var(--sf-rem-2xl) }
.px\:3xl { padding-inline: var(--sf-rem-3xl) }
.px\:4xl { padding-inline: var(--sf-rem-4xl) }
.px\:5xl { padding-inline: var(--sf-rem-5xl) }
.px\:6xl { padding-inline: var(--sf-rem-6xl) }
.px\:7xl { padding-inline: var(--sf-rem-7xl) }
.px\:8xl { padding-inline: var(--sf-rem-8xl) }
.px\:9xl { padding-inline: var(--sf-rem-9xl) }
.px\:10xl { padding-inline: var(--sf-rem-10xl) }
.px\:11xl { padding-inline: var(--sf-rem-11xl) }
.px\:12xl { padding-inline: var(--sf-rem-12xl) }

.py { padding-block: var(--sf-rem) }
.py\:0 { padding-block: 0 }
.py\:xs { padding-block: var(--sf-rem-xs) }
.py\:sm { padding-block: var(--sf-rem-sm) }
.py\:s { padding-block: var(--sf-rem-s) }
.py\:ms { padding-block: var(--sf-rem-ms) }
.py\:ls { padding-block: var(--sf-rem-ls) }
.py\:md { padding-block: var(--sf-rem-md) }
.py\:lg { padding-block: var(--sf-rem-lg) }
.py\:xl { padding-block: var(--sf-rem-xl) }
.py\:2xl { padding-block: var(--sf-rem-2xl) }
.py\:3xl { padding-block: var(--sf-rem-3xl) }
.py\:4xl { padding-block: var(--sf-rem-4xl) }
.py\:5xl { padding-block: var(--sf-rem-5xl) }
.py\:6xl { padding-block: var(--sf-rem-6xl) }
.py\:7xl { padding-block: var(--sf-rem-7xl) }
.py\:8xl { padding-block: var(--sf-rem-8xl) }
.py\:9xl { padding-block: var(--sf-rem-9xl) }
.py\:10xl { padding-block: var(--sf-rem-10xl) }
.py\:11xl { padding-block: var(--sf-rem-11xl) }
.py\:12xl { padding-block: var(--sf-rem-12xl) }

/* /// */

html.var .p { padding: 8px }
html.var .p\:0 { padding: 0 }
html.var .p\:xs { padding: 4px }
html.var .p\:sm { padding: 8px }
html.var .p\:s { padding: 10px }
html.var .p\:ms { padding: 12px }
html.var .p\:ls { padding: 14px }
html.var .p\:md { padding: 16px }
html.var .p\:lg { padding: 18px }
html.var .p\:xl { padding: 20px }
html.var .p\:2xl { padding: 24px }
html.var .p\:3xl { padding: 32px }
html.var .p\:4xl { padding: 40px }
html.var .p\:5xl { padding: 48px }
html.var .p\:6xl { padding: 56px }
html.var .p\:7xl { padding: 64px }
html.var .p\:8xl { padding: 72px }
html.var .p\:9xl { padding: 80px }
html.var .p\:10xl { padding: 88px }
html.var .p\:11xl { padding: 96px }
html.var .p\:12xl { padding: 104px }

html.var .pt { padding-top: 8px }
html.var .pt\:0 { padding-top: 0 }
html.var .pt\:xs { padding-top: 4px }
html.var .pt\:sm { padding-top: 8px }
html.var .pt\:s { padding-top: 10px }
html.var .pt\:ms { padding-top: 12px }
html.var .pt\:ls { padding-top: 14px }
html.var .pt\:md { padding-top: 16px }
html.var .pt\:lg { padding-top: 18px }
html.var .pt\:xl { padding-top: 20px }
html.var .pt\:2xl { padding-top: 24px }
html.var .pt\:3xl { padding-top: 32px }
html.var .pt\:4xl { padding-top: 40px }
html.var .pt\:5xl { padding-top: 48px }
html.var .pt\:6xl { padding-top: 56px }
html.var .pt\:7xl { padding-top: 64px }
html.var .pt\:8xl { padding-top: 72px }
html.var .pt\:9xl { padding-top: 80px }
html.var .pt\:10xl { padding-top: 88px }
html.var .pt\:11xl { padding-top: 96px }
html.var .pt\:12xl { padding-top: 104px }

html.var .pr { padding-right: 8px }
html.var .pr\:0 { padding-right: 0 }
html.var .pr\:xs { padding-right: 4px }
html.var .pr\:sm { padding-right: 8px }
html.var .pr\:s { padding-right: 10px }
html.var .pr\:ms { padding-right: 12px }
html.var .pr\:ls { padding-right: 14px }
html.var .pr\:md { padding-right: 16px }
html.var .pr\:lg { padding-right: 18px }
html.var .pr\:xl { padding-right: 20px }
html.var .pr\:2xl { padding-right: 24px }
html.var .pr\:3xl { padding-right: 32px }
html.var .pr\:4xl { padding-right: 40px }
html.var .pr\:5xl { padding-right: 48px }
html.var .pr\:6xl { padding-right: 56px }
html.var .pr\:7xl { padding-right: 64px }
html.var .pr\:8xl { padding-right: 72px }
html.var .pr\:9xl { padding-right: 80px }
html.var .pr\:10xl { padding-right: 88px }
html.var .pr\:11xl { padding-right: 96px }
html.var .pr\:12xl { padding-right: 104px }

html.var .pb { padding-bottom: 8px }
html.var .pb\:0 { padding-bottom: 0 }
html.var .pb\:xs { padding-bottom: 4px }
html.var .pb\:sm { padding-bottom: 8px }
html.var .pb\:s { padding-bottom: 10px }
html.var .pb\:ms { padding-bottom: 12px }
html.var .pb\:ls { padding-bottom: 14px }
html.var .pb\:md { padding-bottom: 16px }
html.var .pb\:lg { padding-bottom: 18px }
html.var .pb\:xl { padding-bottom: 20px }
html.var .pb\:2xl { padding-bottom: 24px }
html.var .pb\:3xl { padding-bottom: 32px }
html.var .pb\:4xl { padding-bottom: 40px }
html.var .pb\:5xl { padding-bottom: 48px }
html.var .pb\:6xl { padding-bottom: 56px }
html.var .pb\:7xl { padding-bottom: 64px }
html.var .pb\:8xl { padding-bottom: 72px }
html.var .pb\:9xl { padding-bottom: 80px }
html.var .pb\:10xl { padding-bottom: 88px }
html.var .pb\:11xl { padding-bottom: 96px }
html.var .pb\:12xl { padding-bottom: 104px }

html.var .pl { padding-left: 8px }
html.var .pl\:0 { padding-left: 0 }
html.var .pl\:xs { padding-left: 4px }
html.var .pl\:sm { padding-left: 8px }
html.var .pl\:s { padding-left: 10px }
html.var .pl\:ms { padding-left: 12px }
html.var .pl\:ls { padding-left: 14px }
html.var .pl\:md { padding-left: 16px }
html.var .pl\:lg { padding-left: 18px }
html.var .pl\:xl { padding-left: 20px }
html.var .pl\:2xl { padding-left: 24px }
html.var .pl\:3xl { padding-left: 32px }
html.var .pl\:4xl { padding-left: 40px }
html.var .pl\:5xl { padding-left: 48px }
html.var .pl\:6xl { padding-left: 56px }
html.var .pl\:7xl { padding-left: 64px }
html.var .pl\:8xl { padding-left: 72px }
html.var .pl\:9xl { padding-left: 80px }
html.var .pl\:10xl { padding-left: 88px }
html.var .pl\:11xl { padding-left: 96px }
html.var .pl\:12xl { padding-left: 104px }

html.var .px { padding-left: 8px; padding-right: 8px }
html.var .px\:0 { padding-left: 0; padding-right: 0 }
html.var .px\:xs { padding-left: 4px; padding-right: 4px }
html.var .px\:sm { padding-left: 8px; padding-right: 8px }
html.var .px\:s { padding-left: 10px; padding-right: 10px }
html.var .px\:ms { padding-left: 12px; padding-right: 12px }
html.var .px\:ls { padding-left: 14px; padding-right: 14px }
html.var .px\:md { padding-left: 16px; padding-right: 16px }
html.var .px\:lg { padding-left: 18px; padding-right: 18px }
html.var .px\:xl { padding-left: 20px; padding-right: 20px }
html.var .px\:2xl { padding-left: 24px; padding-right: 24px }
html.var .px\:3xl { padding-left: 32px; padding-right: 32px }
html.var .px\:4xl { padding-left: 40px; padding-right: 40px }
html.var .px\:5xl { padding-left: 48px; padding-right: 48px }
html.var .px\:6xl { padding-left: 56px; padding-right: 56px }
html.var .px\:7xl { padding-left: 64px; padding-right: 64px }
html.var .px\:8xl { padding-left: 72px; padding-right: 72px }
html.var .px\:9xl { padding-left: 80px; padding-right: 80px }
html.var .px\:10xl { padding-left: 88px; padding-right: 88px }
html.var .px\:11xl { padding-left: 96px; padding-right: 96px }
html.var .px\:12xl { padding-left: 104px; padding-right: 104px }

html.var .py { padding-top: 8px; padding-bottom: 8px }
html.var .py\:0 { padding-top: 0; padding-bottom: 0 }
html.var .py\:xs { padding-top: 4px; padding-bottom: 4px }
html.var .py\:sm { padding-top: 8px; padding-bottom: 8px }
html.var .py\:s { padding-top: 10px; padding-bottom: 10px }
html.var .py\:ms { padding-top: 12px; padding-bottom: 12px }
html.var .py\:ls { padding-top: 14px; padding-bottom: 14px }
html.var .py\:md { padding-top: 16px; padding-bottom: 16px }
html.var .py\:lg { padding-top: 18px; padding-bottom: 18px }
html.var .py\:xl { padding-top: 20px; padding-bottom: 20px }
html.var .py\:2xl { padding-top: 24px; padding-bottom: 24px }
html.var .py\:3xl { padding-top: 32px; padding-bottom: 32px }
html.var .py\:4xl { padding-top: 40px; padding-bottom: 40px }
html.var .py\:5xl { padding-top: 48px; padding-bottom: 48px }
html.var .py\:6xl { padding-top: 56px; padding-bottom: 56px }
html.var .py\:7xl { padding-top: 64px; padding-bottom: 64px }
html.var .py\:8xl { padding-top: 72px; padding-bottom: 72px }
html.var .py\:9xl { padding-top: 80px; padding-bottom: 80px }
html.var .py\:10xl { padding-top: 88px; padding-bottom: 88px }
html.var .py\:11xl { padding-top: 96px; padding-bottom: 96px }
html.var .py\:12xl { padding-top: 104px; padding-bottom: 104px }