padding

Sets the inner spacing of an element. Control individually with directional prefixes (pt, pr, pb, pl), or use the Atomic CSS exclusive shorthands px (left/right) and py (top/bottom) for convenience.

Class List

Append a value with unit after the prefix. Use px for values under 20px, rem (1rem = 10px) for 20px and above.

px / py -- Horizontal / Vertical Shorthand

px and py are Atomic CSS exclusive shorthands not found in standard CSS. They set left/right or top/bottom padding at once, replacing two classes with one.

<!-- px: apply left/right simultaneously -->
<div class="px2rem">Left/right 20px padding</div>
<!-- Same as above: -->
<div class="pl2rem pr2rem">Left/right 20px padding</div>

<!-- py: apply top/bottom simultaneously -->
<div class="py4rem">Top/bottom 40px padding</div>
<!-- Same as above: -->
<div class="pt4rem pb4rem">Top/bottom 40px padding</div>

<!-- px + py Combination (Button) -->
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">
  Button
</button>

Unit Comparison

Examples of expressing the same spacing in px, rem, %, and em. Based on: html { font-size: 10px }

Visual Comparison

See how the inner spacing of an element changes depending on the padding value.

Common Patterns

Commonly repeated padding combinations used in practice.

<!-- Buttons by size -->
<button class="py4px px8px bg6366F1 cFFFFFF br4px bn cp fs13px">Small</button>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp fs14px">Medium</button>
<button class="py12px px2-4rem bg6366F1 cFFFFFF br8px bn cp fs16px">Large</button>

<!-- Card component -->
<div class="p2rem bg18181B br8px">
  <h3 class="mb8px">Card Title</h3>
  <p>Card content. Equal 20px gap in all directions</p>
</div>

<!-- Section (wide top/bottom, default left/right) -->
<section class="py4rem px2rem">
  <h2 class="mb16px">Section Title</h2>
  <p>Top/bottom 40px, left/right 20px</p>
</section>

<!-- Used with bxzbb -->
<div class="w100p p2rem bxzbb">
  Padding is included within the width (maintains 100%)
</div>

Tips & Notes

Shorthand Decomposition

p (padding) is internally decomposed into 4-direction longhands. Therefore, when using shorthand and directional classes together, they work correctly regardless of order. Multi-values are also decomposed following CSS shorthand rules: p10px-20px (2 values) → top/bottom 10px, right/left 20px, p10px-20px-30px (3 values) → top 10px, right/left 20px, bottom 30px, p10px-20px-30px-40px (4 values) → top 10px, right 20px, bottom 30px, left 40px.

<!-- p2rem + pl10px → all 20px, left only 10px -->
<div class="p2rem pl10px">...</div>

<!-- Generated CSS -->
.p2rem {
  padding-top: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
}
.pl10px { padding-left: 10px; }
/* → padding-left precisely overridden to 10px */

<!-- Multi-value decomposition examples -->
.p10px-20px {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.p10px-20px-30px {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 20px;
}
.p10px-20px-30px-40px {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Related Properties