Padding

Utilities for padding.

Using pa-[number], you can control the element's padding from all sides.

pa-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "pa-5" will give you a padding of 1.25rem.
→
You can use Arbitrary values like "pa-(16px)" or "pa-(2em)" as well.
Learn more about Arbitrary Styling

Padding Top

Using pt-[number], you can control the padding to the top of an element.

pt-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "pt-5" will give you a padding-top of 1.25rem.
→
You can use Arbitrary values like "pt-(16px)" or "pt-(2em)" as well.
Learn more about Arbitrary Styling

Padding Right

Using pt-[number], you can control the padding to the right side of an element.

pr-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "pr-5" will give you a padding-right of 1.25rem.
→
You can use Arbitrary values like "pr-(16px)" or "pr-(2em)" as well.
Learn more about Arbitrary Styling

Padding Bottom

Using pb-[number], you can control the padding to the bottom of an element.

pb-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "pb-5" will give you a padding-bottom of 1.25rem.
→
You can use Arbitrary values like "pb-(16px)" or "pb-(2em)" as well.
Learn more about Arbitrary Styling

Padding Left

Using pl-[number], you can control the padding to the left side of an element.

pl-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "pl-5" will give you a padding-left of 1.25rem.
→
You can use Arbitrary values like "pl-(16px)" or "pl-(2em)" as well.
Learn more about Arbitrary Styling

Padding X (Horizontal)

Using px-[number], you can control the element's padding from its horizontal axis.

px-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "px-5" will give you a horizontal padding of 1.25rem.
→
You can use Arbitrary values like "px-(16px)" or "px-(2em)" as well.
Learn more about Arbitrary Styling

Padding Y (Vertical)

Using py-[number], you can control the element's padding from its vertical axis.

py-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "py-5" will give you a vertical padding of 1.25rem.
→
You can use Arbitrary values like "py-(16px)" or "py-(2em)" as well.
Learn more about Arbitrary Styling

Padding Inline Start

Using ps-[number], you can control the element's padding from left or right side based on the text direction.

ps-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "ps-5" will give you a padding-inline-start of 1.25rem.
→
You can use Arbitrary values like "ps-(16px)" or "ps-(2em)" as well.
Learn more about Arbitrary Styling

Padding Inline End

Using pe-[number], you can control the element's padding from left or right side based on the text direction.

pe-
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.

For example, "pe-5" will give you a padding-inline-end of 1.25rem.
→
You can use Arbitrary values like "pe-(16px)" or "pe-(2em)" as well.
Learn more about Arbitrary Styling