Padding
Use the spacing scale to set padding on every side, one side, or an axis.
Sass mixins
| Mixin | CSS properties |
|---|---|
p($key) | padding |
pt($key) | padding-top |
pb($key) | padding-bottom |
pl($key) | padding-left |
pr($key) | padding-right |
px($key) | padding-left, padding-right |
py($key) | padding-top, padding-bottom |
Responsive range mixins
Pass a base size followed by named breakpoint overrides, such as crayon.p-range(4, $md: 8, $lg: 12).
| Mixin | Purpose |
|---|---|
p-range($base, $breakpoint-range...) | Responsive padding |
pt-range($base, $breakpoint-range...) | Responsive top padding |
pb-range($base, $breakpoint-range...) | Responsive bottom padding |
pl-range($base, $breakpoint-range...) | Responsive left padding |
pr-range($base, $breakpoint-range...) | Responsive right padding |
px-range($base, $breakpoint-range...) | Responsive horizontal padding |
py-range($base, $breakpoint-range...) | Responsive vertical padding |
Utility classes
| Class | Property |
|---|---|
p-0, p-none | padding: 0 |
px-0, px-none | padding-left: 0; padding-right: 0 |
py-0, py-none | padding-top: 0; padding-bottom: 0 |
pt-0, pt-none | padding-top: 0 |
pr-0, pr-none | padding-right: 0 |
pb-0, pb-none | padding-bottom: 0 |
pl-0, pl-none | padding-left: 0 |
p-{size} | padding: {size} |
px-{size} | padding-left: {size}; padding-right: {size} |
py-{size} | padding-top: {size}; padding-bottom: {size} |
pt-{size} | padding-top: {size} |
pr-{size} | padding-right: {size} |
pb-{size} | padding-bottom: {size} |
pl-{size} | padding-left: {size} |
Examples
Sass mixins
scss
.card {
@include crayon.p(4);
@include crayon.px(8);
}sass
.card
+crayon.p(4)
+crayon.px(8)Utility classes
html
<div class="p-4">Padding on all sides</div>
<div class="px-8">Horizontal padding</div>
<div class="pt-2">Top padding</div>Sass functions
scss
.card {
padding: crayon.size(4) crayon.size(8);
}sass
.card
padding: crayon.size(4) crayon.size(8)CSS variables
css
.card {
padding: var(--size-4) var(--size-8);
}