Padding

Utilities for controlling padding using custom spacing variables.

💡 Tip

The padding classes are designed to provide fluid scaling for all spacing values, ensuring consistency and adaptability in the designs. These classes allow us to maintain harmonious spacing across the components and layouts.

To gain a deeper understanding of how these spacing values are calculated and the principles behind the fluid scaling system, we recommend referring to our dedicated documentation on the Foundation/Fluid Scaling page.

Class Name	CSS Equivalent
.p-none	padding: var(--cds-sys-spacing-none); /* ≈0px*/
.p-b-none	padding-block: var(--cds-sys-spacing-none); /* ≈0px*/
.p-i-none	padding-inline: var(--cds-sys-spacing-none); /* ≈0px*/
.p-bs-none	padding-block-start: var(--cds-sys-spacing-none); /* ≈0px*/
.p-be-none	padding-block-end: var(--cds-sys-spacing-none); /* ≈0px*/
.p-is-none	padding-inline-start: var(--cds-sys-spacing-none); /* ≈0px*/
.p-ie-none	padding-inline-end: var(--cds-sys-spacing-none); /* ≈0px*/
.p-3xs	padding: var(--cds-sys-spacing-3xs); /* ≈4px*/
.p-b-3xs	padding-block: var(--cds-sys-spacing-3xs); /* ≈4px*/
.p-i-3xs	padding-inline: var(--cds-sys-spacing-3xs); /* ≈4px*/
.p-bs-3xs	padding-block-start: var(--cds-sys-spacing-3xs); /* ≈4px*/
.p-be-3xs	padding-block-end: var(--cds-sys-spacing-3xs); /* ≈4px*/
.p-is-3xs	padding-inline-start: var(--cds-sys-spacing-3xs); /* ≈4px*/
.p-ie-3xs	padding-inline-end: var(--cds-sys-spacing-3xs); /* ≈4px*/
.p-2xs	padding: var(--cds-sys-spacing-2xs); /* ≈8px*/
.p-b-2xs	padding-block: var(--cds-sys-spacing-2xs); /* ≈8px*/
.p-i-2xs	padding-inline: var(--cds-sys-spacing-2xs); /* ≈8px*/
.p-bs-2xs	padding-block-start: var(--cds-sys-spacing-2xs); /* ≈8px*/
.p-be-2xs	padding-block-end: var(--cds-sys-spacing-2xs); /* ≈8px*/
.p-is-2xs	padding-inline-start: var(--cds-sys-spacing-2xs); /* ≈8px*/
.p-ie-2xs	padding-inline-end: var(--cds-sys-spacing-2xs); /* ≈8px*/
.p-xs	padding: var(--cds-sys-spacing-xs); /* ≈12px*/
.p-b-xs	padding-block: var(--cds-sys-spacing-xs); /* ≈12px*/
.p-i-xs	padding-inline: var(--cds-sys-spacing-xs); /* ≈12px*/
.p-bs-xs	padding-block-start: var(--cds-sys-spacing-xs); /* ≈12px*/
.p-be-xs	padding-block-end: var(--cds-sys-spacing-xs); /* ≈12px*/
.p-is-xs	padding-inline-start: var(--cds-sys-spacing-xs); /* ≈12px*/
.p-ie-xs	padding-inline-end: var(--cds-sys-spacing-xs); /* ≈12px*/
.p-s	padding: var(--cds-sys-spacing-s); /* ≈16px*/
.p-b-s	padding-block: var(--cds-sys-spacing-s); /* ≈16px*/
.p-i-s	padding-inline: var(--cds-sys-spacing-s); /* ≈16px*/
.p-bs-s	padding-block-start: var(--cds-sys-spacing-s); /* ≈16px*/
.p-be-s	padding-block-end: var(--cds-sys-spacing-s); /* ≈16px*/
.p-is-s	padding-inline-start: var(--cds-sys-spacing-s); /* ≈16px*/
.p-ie-s	padding-inline-end: var(--cds-sys-spacing-s); /* ≈16px*/
.p-m	padding: var(--cds-sys-spacing-m); /* ≈24px*/
.p-b-m	padding-block: var(--cds-sys-spacing-m); /* ≈24px*/
.p-i-m	padding-inline: var(--cds-sys-spacing-m); /* ≈24px*/
.p-bs-m	padding-block-start: var(--cds-sys-spacing-m); /* ≈24px*/
.p-be-m	padding-block-end: var(--cds-sys-spacing-m); /* ≈24px*/
.p-is-m	padding-inline-start: var(--cds-sys-spacing-m); /* ≈24px*/
.p-ie-m	padding-inline-end: var(--cds-sys-spacing-m); /* ≈24px*/
.p-l	padding: var(--cds-sys-spacing-l); /* ≈32px*/
.p-b-l	padding-block: var(--cds-sys-spacing-l); /* ≈32px*/
.p-i-l	padding-inline: var(--cds-sys-spacing-l); /* ≈32px*/
.p-bs-l	padding-block-start: var(--cds-sys-spacing-l); /* ≈32px*/
.p-be-l	padding-block-end: var(--cds-sys-spacing-l); /* ≈32px*/
.p-is-l	padding-inline-start: var(--cds-sys-spacing-l); /* ≈32px*/
.p-ie-l	padding-inline-end: var(--cds-sys-spacing-l); /* ≈32px*/
.p-xl	padding: var(--cds-sys-spacing-xl); /* ≈48px*/
.p-b-xl	padding-block: var(--cds-sys-spacing-xl); /* ≈48px*/
.p-i-xl	padding-inline: var(--cds-sys-spacing-xl); /* ≈48px*/
.p-bs-xl	padding-block-start: var(--cds-sys-spacing-xl); /* ≈48px*/
.p-be-xl	padding-block-end: var(--cds-sys-spacing-xl); /* ≈48px*/
.p-is-xl	padding-inline-start: var(--cds-sys-spacing-xl); /* ≈48px*/
.p-ie-xl	padding-inline-end: var(--cds-sys-spacing-xl); /* ≈48px*/
.p-2xl	padding: var(--cds-sys-spacing-2xl); /* ≈64px*/
.p-b-2xl	padding-block: var(--cds-sys-spacing-2xl); /* ≈64px*/
.p-i-2xl	padding-inline: var(--cds-sys-spacing-2xl); /* ≈64px*/
.p-bs-2xl	padding-block-start: var(--cds-sys-spacing-2xl); /* ≈64px*/
.p-be-2xl	padding-block-end: var(--cds-sys-spacing-2xl); /* ≈64px*/
.p-is-2xl	padding-inline-start: var(--cds-sys-spacing-2xl); /* ≈64px*/
.p-ie-2xl	padding-inline-end: var(--cds-sys-spacing-2xl); /* ≈64px*/
.p-3xl	padding: var(--cds-sys-spacing-3xl); /* ≈96px*/
.p-b-3xl	padding-block: var(--cds-sys-spacing-3xl); /* ≈96px*/
.p-i-3xl	padding-inline: var(--cds-sys-spacing-3xl); /* ≈96px*/
.p-bs-3xl	padding-block-start: var(--cds-sys-spacing-3xl); /* ≈96px*/
.p-be-3xl	padding-block-end: var(--cds-sys-spacing-3xl); /* ≈96px*/
.p-is-3xl	padding-inline-start: var(--cds-sys-spacing-3xl); /* ≈96px*/
.p-ie-3xl	padding-inline-end: var(--cds-sys-spacing-3xl); /* ≈96px*/

Add padding to a single side

Control the padding on one side of an element using the p-{b|s}{s|e}-{size} utilities.

Abbriviation
b	block (default vertical axis)
i	inline (default horizontal axis)
s	start (top for block, left for inline)
e	end (bottom for block, right for inline)

As an illustration, consider using the class "p-bs-m" to apply 1.5rem of padding to the top (block-start) at desktop size. This padding will align with the top side of an element, based on its text direction.

Similarly, the class "p-ie-s" will add 1rem of padding to the right (inline-end) at desktop size, aligning it with either the right side of the element, depending on its text direction.

💡 Tip

In our development practices, we aim to avoid the use of physical properties such as top, bottom, right, and left. Instead, we advocate for the use of logical properties: {block|inline}-{end|start}. To enhance your understanding of these logical properties, we recommend visiting the Foundation/Logical Properties page.

p-bs-m

p-ie-s

p-be-l

p-is-2xl

<div class="[...] p-bs-m">p-bs-m</div>
<div class="[...] p-ie-s">p-ie-s</div>
<div class="[...] p-be-l">p-be-l</div>
<div class="[...] p-is-2xl">p-is-2xl</div>

Add horizontal padding

Control the horizontal padding of an element using the p-i-{size} utilities.

p-i-l

<div class="[...] p-i-l">p-i-l</div>

Add vertical padding

Control the vertical padding of an element using the p-b-{size} utilities.

p-b-l

<div class="[...] p-b-l">p-b-l</div>

Add padding to all sides

Control the padding on all sides of an element using the p-{size} utilities.

p-l

<div class="[...] p-l">p-l</div>