Press
/
to search

Spacing

Padding

Utilities for controls padding in 0.25rem increments.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
padding-pxpadding: 1px
padding-0padding: 0
padding-1padding: 0.25rem
padding-2padding: 0.5rem
padding-3padding: 0.75rem
padding-4padding: 1rem
padding-5padding: 1.25rem
padding-6padding: 1.5rem
padding-8padding: 2rem
padding-10padding: 2.5rem
padding-12padding: 3rem
padding-16padding: 4rem
padding-20padding: 5rem
padding-24padding: 6rem
padding-32padding: 8rem
padding-40padding: 10rem
padding-48padding: 12rem
padding-56padding: 14rem
padding-64padding: 16rem
padding-72padding: 18rem
padding-80padding: 20rem
padding-88padding: 22rem
padding-96padding: 24rem
padding-104padding: 26rem
padding-112padding: 28rem
classcss
padding-x-pxpadding-right: 1px;
padding-left: 1px
padding-x-0padding-right: 0;
padding-left: 0
padding-x-1padding-right: 0.25rem;
padding-left: 0.25rem
padding-x-2padding-right: 0.5rem;
padding-left: 0.5rem
padding-x-3padding-right: 0.75rem;
padding-left: 0.75rem
padding-x-4padding-right: 1rem;
padding-left: 1rem
padding-x-5padding-right: 1.25rem;
padding-left: 1.25rem
padding-x-6padding-right: 1.5rem;
padding-left: 1.5rem
padding-x-8padding-right: 2rem;
padding-left: 2rem
padding-x-10padding-right: 2.5rem;
padding-left: 2.5rem
padding-x-12padding-right: 3rem;
padding-left: 3rem
padding-x-16padding-right: 4rem;
padding-left: 4rem
padding-x-20padding-right: 5rem;
padding-left: 5rem
padding-x-24padding-right: 6rem;
padding-left: 6rem
padding-x-32padding-right: 8rem;
padding-left: 8rem
padding-x-40padding-right: 10rem;
padding-left: 10rem
padding-x-48padding-right: 12rem;
padding-left: 12rem
padding-x-56padding-right: 14rem;
padding-left: 14rem
padding-x-64padding-right: 16rem;
padding-left: 16rem
padding-x-72padding-right: 18rem;
padding-left: 18rem
padding-x-80padding-right: 20rem;
padding-left: 20rem
padding-x-88padding-right: 22rem;
padding-left: 22rem
padding-x-96padding-right: 24rem;
padding-left: 24rem
padding-x-104padding-right: 26rem;
padding-left: 26rem
padding-x-112padding-right: 28rem;
padding-left: 28rem
classcss
padding-y-pxpadding-top: 1px;
padding-bottom: 1px
padding-y-0padding-top: 0;
padding-bottom: 0
padding-y-1padding-top: 0.25rem;
padding-bottom: 0.25rem
padding-y-2padding-top: 0.5rem;
padding-bottom: 0.5rem
padding-y-3padding-top: 0.75rem;
padding-bottom: 0.75rem
padding-y-4padding-top: 1rem;
padding-bottom: 1rem
padding-y-5padding-top: 1.25rem;
padding-bottom: 1.25rem
padding-y-6padding-top: 1.5rem;
padding-bottom: 1.5rem
padding-y-8padding-top: 2rem;
padding-bottom: 2rem
padding-y-10padding-top: 2.5rem;
padding-bottom: 2.5rem
padding-y-12padding-top: 3rem;
padding-bottom: 3rem
padding-y-16padding-top: 4rem;
padding-bottom: 4rem
padding-y-20padding-top: 5rem;
padding-bottom: 5rem
padding-y-24padding-top: 6rem;
padding-bottom: 6rem
padding-y-32padding-top: 8rem;
padding-bottom: 8rem
padding-y-40padding-top: 10rem;
padding-bottom: 10rem
padding-y-48padding-top: 12rem;
padding-bottom: 12rem
padding-y-56padding-top: 14rem;
padding-bottom: 14rem
padding-y-64padding-top: 16rem;
padding-bottom: 16rem
padding-y-72padding-top: 18rem;
padding-bottom: 18rem
padding-y-80padding-top: 20rem;
padding-bottom: 20rem
padding-y-88padding-top: 22rem;
padding-bottom: 22rem
padding-y-96padding-top: 24rem;
padding-bottom: 24rem
padding-y-104padding-top: 26rem;
padding-bottom: 26rem
padding-y-112padding-top: 28rem;
padding-bottom: 28rem
classcss
padding-t-pxpadding-top: 1px
padding-t-0padding-top: 0
padding-t-1padding-top: 0.25rem
padding-t-2padding-top: 0.5rem
padding-t-3padding-top: 0.75rem
padding-t-4padding-top: 1rem
padding-t-5padding-top: 1.25rem
padding-t-6padding-top: 1.5rem
padding-t-8padding-top: 2rem
padding-t-10padding-top: 2.5rem
padding-t-12padding-top: 3rem
padding-t-16padding-top: 4rem
padding-t-20padding-top: 5rem
padding-t-24padding-top: 6rem
padding-t-32padding-top: 8rem
padding-t-40padding-top: 10rem
padding-t-48padding-top: 12rem
padding-t-56padding-top: 14rem
padding-t-64padding-top: 16rem
padding-t-72padding-top: 18rem
padding-t-80padding-top: 20rem
padding-t-88padding-top: 22rem
padding-t-96padding-top: 24rem
padding-t-104padding-top: 26rem
padding-t-112padding-top: 28rem
classcss
padding-r-pxpadding-right: 1px
padding-r-0padding-right: 0
padding-r-1padding-right: 0.25rem
padding-r-2padding-right: 0.5rem
padding-r-3padding-right: 0.75rem
padding-r-4padding-right: 1rem
padding-r-5padding-right: 1.25rem
padding-r-6padding-right: 1.5rem
padding-r-8padding-right: 2rem
padding-r-10padding-right: 2.5rem
padding-r-12padding-right: 3rem
padding-r-16padding-right: 4rem
padding-r-20padding-right: 5rem
padding-r-24padding-right: 6rem
padding-r-32padding-right: 8rem
padding-r-40padding-right: 10rem
padding-r-48padding-right: 12rem
padding-r-56padding-right: 14rem
padding-r-64padding-right: 16rem
padding-r-72padding-right: 18rem
padding-r-80padding-right: 20rem
padding-r-88padding-right: 22rem
padding-r-96padding-right: 24rem
padding-r-104padding-right: 26rem
padding-r-112padding-right: 28rem
classcss
padding-b-pxpadding-bottom: 1px
padding-b-0padding-bottom: 0
padding-b-1padding-bottom: 0.25rem
padding-b-2padding-bottom: 0.5rem
padding-b-3padding-bottom: 0.75rem
padding-b-4padding-bottom: 1rem
padding-b-5padding-bottom: 1.25rem
padding-b-6padding-bottom: 1.5rem
padding-b-8padding-bottom: 2rem
padding-b-10padding-bottom: 2.5rem
padding-b-12padding-bottom: 3rem
padding-b-16padding-bottom: 4rem
padding-b-20padding-bottom: 5rem
padding-b-24padding-bottom: 6rem
padding-b-32padding-bottom: 8rem
padding-b-40padding-bottom: 10rem
padding-b-48padding-bottom: 12rem
padding-b-56padding-bottom: 14rem
padding-b-64padding-bottom: 16rem
padding-b-72padding-bottom: 18rem
padding-b-80padding-bottom: 20rem
padding-b-88padding-bottom: 22rem
padding-b-96padding-bottom: 24rem
padding-b-104padding-bottom: 26rem
padding-b-112padding-bottom: 28rem
classcss
padding-l-pxpadding-left: 1px
padding-l-0padding-left: 0
padding-l-1padding-left: 0.25rem
padding-l-2padding-left: 0.5rem
padding-l-3padding-left: 0.75rem
padding-l-4padding-left: 1rem
padding-l-5padding-left: 1.25rem
padding-l-6padding-left: 1.5rem
padding-l-8padding-left: 2rem
padding-l-10padding-left: 2.5rem
padding-l-12padding-left: 3rem
padding-l-16padding-left: 4rem
padding-l-20padding-left: 5rem
padding-l-24padding-left: 6rem
padding-l-32padding-left: 8rem
padding-l-40padding-left: 10rem
padding-l-48padding-left: 12rem
padding-l-56padding-left: 14rem
padding-l-64padding-left: 16rem
padding-l-72padding-left: 18rem
padding-l-80padding-left: 20rem
padding-l-88padding-left: 22rem
padding-l-96padding-left: 24rem
padding-l-104padding-left: 26rem
padding-l-112padding-left: 28rem

Usage

Set padding to top, bottom, left and right.

<div class="padding-6">
  ...
</div>
HTML
.dummy {
  @extend
    .padding-6;
}
SCSS

Set padding to left and right.

<div class="padding-x-6">
  ...
</div>
HTML
.dummy {
  @extend
    .padding-x-6;
}
SCSS

Set padding to top and bottom.

<div class="padding-y-6">
  ...
</div>
HTML
.dummy {
  @extend
    .padding-y-6;
}
SCSS

Set padding to top.

<div class="padding-t-6">
  ...
</div>
HTML
.dummy {
  @extend
    .padding-t-6;
}
SCSS

Set padding to bottom.

<div class="padding-b-6">
  ...
</div>
HTML
.dummy {
  @extend
    .padding-b-6;
}
SCSS

Set padding to left.

<div class="padding-l-6">
  ...
</div>
HTML
.dummy {
  @extend
    .padding-l-6;
  ...
</div>
SCSS

Set padding to right.

<div class="padding-r-6">
  ...
</div>
HTML
.dummy {
  @extend
    .padding-r-6;
}
SCSS

Use (expand) variant to apply padding to all child elements.

TEST
TEST
TEST
<div class="(expand)padding-4">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>
HTML
.dummy {
  @extend
    .(expand)padding-4;
}
SCSS