Padding

How to use

Padding is very similar to margin. They can have sm, md, lg, xl etc. classes, they also have the same fractional classes, they can be applied in any direction, they both cna be made responsive, adn indeed modifying the same values in variables.scss will apply classes to both.

Classes

Here are the default classes. Like with margin that in addition to the p-[size] classes, there's also .pt,.pb,pl, and pr classes for top, bottom, left, and right paddings respectively, as well as .px and .py classes for both left and right or top and bottom.

All these clases also respond to the responsive prefixes, see the (Responsive)[/docs/responsive-classes/] section for details for that as well.

Note that the percents aren't repeated, for example, there's a 1/20 padding but not a 2/20 padding or a 4/20 padding because those are already handled by the 1/10 and 1/5 classes.

Note that with the fraction classes the percents aren't repeated, for example, there's a 1/20 and a 3/20 padding, but not a 2/20 padding or a 4/20 padding because those are already handled by the 1/10 and 1/5 classes.

Each of these classes are repeated for top, bottom, left, right, x, and y directions so see some examples below:

Examples

Padding Sizes

These are the example "default" sizes for paddings. Note these can all be changed by editing the _variables.scss file. See the Customize section for further info. Each blue box is a div, the light magenta areas represent the paddings applied by the classes in the caption:

Here's what the html for one of the boxes above would look like

<div className="mb-lg">
  <div className="bg-magenta-lt pr-xl radius-md">
    <div className="bg-blue w-3 h-3 radius-md" />
  </div>
  <p>.pr-xl</p>
</div>

Fractional Sizes

Like margin, percents are relative to the containing element. With margins this makes more sense to me, and with padding I find this to be slightly more counter-intutitve but hey it's how it's done.

Like with margin, for these examples I have a fixed witdth container, and a blue div element, but here the light magenta element signifies padding of the blue div's parent, but it's relative to the dashed-outline container div, so, like margin, it breaks out when given a width full (or near full):

Here's an example for the HTML of the pl-1/2 box:

<div className="m-md">
  <div className="display-flex bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed w-16">
    <div className="pr-1/2 bg-magenta-lt display-inline-block">
      <div className="bg-blue w-3 h-3" />
    </div>
  </div>
  <p>.pr-1/2</p>
</div>

Directional Paddings

And here are examples of classes going in each direction. Each "directional" class also works for every one of the widths i.e. sm, md, lg, etc.

A few examples of the above boxes (just pt, pb, and px):

<div class="display-flex flex-col justify-center ">
  <div class="display-flex center">
    <div class="bg-magenta-lt pt-xl radius-md">
      <div class="w-3 h-3 bg-blue radius-md"></div>
    </div>
  </div>
  <p>.pt-xl</p>
</div>

{" "}

<div class="display-flex flex-col justify-center ">
  <div class="display-flex center">
    <div class="bg-magenta-lt pb-xl radius-md">
      <div class="w-3 h-3 bg-blue radius-md"></div>
    </div>
  </div>
  <p>.pb-xl</p>
</div>

<div class="display-flex flex-col justify-center ">
  <div class="display-flex center">
    <div class="bg-magenta-lt px-xl radius-md">
      <div class="w-3 h-3 bg-blue radius-md"></div>
    </div>
  </div>
  <p>.px-xl</p>
</div>

Responsive Paddings

And finally, here's some examples with the responsive classes set. If you're on a browser, adjust the screen sizes to see them in action, although for small sizes you'll have to close the sidebar:

Code for the Box:

<div class="bg-background-dkr border-dark-mode-only-ltr border-lg border-dashed radius-md mb-md">
  <div class="w-5 h-5 m-sm tab:m-lg scr:m-2xl lg:m-3xl bg-blue radius-md" />
</div>

Responive padding with the max-[breakpoint] classes. Here the padding left is 1/4 for widths under 1024px and 3/4 for widths over that amount:

Happy coding!