Skip to main content

Padding

Padding controls the breathing room inside an element — the space between the element’s edge and its content. Use it to keep text from touching borders and to make sections feel more comfortable to read.

Usage​

Use numbers when you want to control spacing in simple steps.

  • All sides: padding-0 to padding-99
  • Per side: padding-top-0 to padding-top-99, padding-right-0 to padding-right-99, padding-bottom-0 to padding-bottom-99, padding-left-0 to padding-left-99

Numbers make the spacing bigger or smaller in simple steps, and they still scale with the screen.

Examples​

<div class="padding-6">
    <h2 class="padding-bottom-2">Title</h2>
    <p class="padding-top-12 padding-left-4">Paragraph with custom spacing.</p>
</div>
  • Valid values: Whole numbers only (0–99). Leading zeros are OK (padding-02 is the same as padding-2).
  • Invalid values: padding-100, padding-2.5, padding--1, padding-xx.