# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/padding.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { CustomizingYourSpacingScale } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";
import { Stripes } from "@/components/stripes.tsx";
import { UsingACustomValue } from "@/components/content.tsx";

export const title = "padding";
export const description = "Utilities for controlling an element's padding.";

<ApiTable
  rows={[
    ["p", "padding"],
    ["px", "padding-inline"],
    ["py", "padding-block"],
    ["ps", "padding-inline-start"],
    ["pe", "padding-inline-end"],
    ["pt", "padding-top"],
    ["pr", "padding-right"],
    ["pb", "padding-bottom"],
    ["pl", "padding-left"],
  ].flatMap(([prefix, property]) => [
    [`${prefix}-<number>`, `${property}: calc(var(--spacing) * <number>);`],
    [`${prefix}-px`, `${property}: 1px;`],
    [`${prefix}-(<custom-property>)`, `${property}: var(<custom-property>);`],
    [`${prefix}-[<value>]`, `${property}: <value>;`],
  ])}
/>

## Examples

### Basic example

Use `p-<number>` utilities like `p-4` and `p-8` to control the padding on all sides of an element:

<Figure>

<Example>
  {
    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="relative rounded-lg bg-violet-500 p-8">
        <Stripes noColor className="absolute inset-0 rounded-lg text-white/50" />
        <div className="relative bg-violet-500 p-4">p-8</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:p-8] -->
<div class="p-8 ...">p-8</div>
```

</Figure>

### Adding padding to one side

Use `pt-<number>`, `pr-<number>`, `pb-<number>`, and `pl-<number>` utilities like `pt-6` and `pr-4` to control the padding on one side of an element:

<Figure>

<Example>
  {
    <div className="-mx-5 flex flex-wrap items-start justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="flex items-start">
        <div className="flex-none px-5">
          <div className="overflow-hidden rounded-lg bg-purple-500">
            <Stripes noColor className="h-6 w-full rounded-t-lg text-white/50" />
            <div className="p-4">pt-6</div>
          </div>
        </div>
        <div className="flex-none px-5 pt-6">
          <div className="flex overflow-hidden rounded-lg bg-purple-500">
            <div className="flex-none p-4">pr-4</div>
            <Stripes noColor className="min-h-full w-4 flex-none rounded-r-lg text-white/50" />
          </div>
        </div>
      </div>
      <div className="flex items-start">
        <div className="flex-none px-5 pt-6">
          <div className="overflow-hidden rounded-lg bg-purple-500">
            <div className="p-4">pb-8</div>
            <Stripes noColor className="h-8 w-full rounded-b-lg text-white/50" />
          </div>
        </div>
        <div className="flex-none px-5 pt-6">
          <div className="flex overflow-hidden rounded-lg bg-purple-500">
            <Stripes noColor className="min-h-full w-2 flex-none rounded-l-lg text-white/50" />
            <div className="flex-none p-4">pl-2</div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:pt-6,pr-4,pb-8,pl-2] -->
<div class="pt-6 ...">pt-6</div>
<div class="pr-4 ...">pr-4</div>
<div class="pb-8 ...">pb-8</div>
<div class="pl-2 ...">pl-2</div>
```

</Figure>

### Adding horizontal padding

Use `px-<number>` utilities like `px-4` and `px-8` to control the horizontal padding of an element:

<Figure>

<Example>
  {
    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="flex overflow-hidden rounded-lg bg-indigo-500">
        <Stripes noColor className="h-full w-8 flex-none rounded-l-lg text-white/50" />
        <div className="p-4">px-8</div>
        <Stripes noColor className="h-full w-8 flex-none rounded-r-lg text-white/50" />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:px-8] -->
<div class="px-8 ...">px-8</div>
```

</Figure>

### Adding vertical padding

Use `py-<number>` utilities like `py-4` and `py-8` to control the vertical padding of an element:

<Figure>

<Example>
  {
    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
      <div className="overflow-hidden rounded-lg bg-pink-500">
        <Stripes noColor className="h-8 w-full flex-none rounded-t-lg text-white/50" />
        <div className="p-4">py-8</div>
        <Stripes noColor className="h-8 w-full flex-none rounded-b-lg text-white/50" />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:py-8] -->
<div class="py-8 ...">py-8</div>
```

</Figure>

### Using logical properties

Use `ps-<number>` or `pe-<number>` utilities like `ps-4` and `pe-8` to set the `padding-inline-start` and `padding-inline-end` logical properties, which map to either the left or right side based on the text direction:

<Figure>

<Example>
  {
    <div className="grid grid-cols-2 place-items-center gap-x-4">
      <div className="flex flex-col items-start gap-y-4">
        <p className="text-sm font-medium">Left-to-right</p>
        <div className="flex overflow-hidden rounded-lg bg-indigo-500 font-mono text-sm leading-6 font-bold text-white">
          <Stripes noColor className="min-h-full w-8 rounded-s-lg text-white/50" />
          <div className="p-4">ps-8</div>
        </div>
        <div className="mt-4 flex overflow-hidden rounded-lg bg-indigo-500 font-mono text-sm leading-6 font-bold text-white">
          <div className="p-4">pe-8</div>
          <Stripes noColor className="min-h-full w-8 rounded-e-lg text-white/50" />
        </div>
      </div>
      <div className="flex flex-col items-end gap-y-4">
        <p className="text-sm font-medium">Right-to-left</p>
        <div className="flex overflow-hidden rounded-lg bg-indigo-500 font-mono text-sm leading-6 font-bold text-white">
          <div className="p-4">ps-8</div>
          <Stripes noColor className="min-h-full w-8 rounded-e-lg text-white/50" />
        </div>
        <div className="mt-4 flex overflow-hidden rounded-lg bg-indigo-500 font-mono text-sm leading-6 font-bold text-white">
          <Stripes noColor className="min-h-full w-8 rounded-s-lg text-white/50" />
          <div className="p-4">pe-8</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:ps-8,pe-8] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div>
  <div dir="ltr">
    <div class="ps-8 ...">ps-8</div>
    <div class="pe-8 ...">pe-8</div>
  </div>
  <div dir="rtl">
    <div class="ps-8 ...">ps-8</div>
    <div class="pe-8 ...">pe-8</div>
  </div>
</div>
```

</Figure>

For more control, you can also use the [LTR and RTL modifiers](/docs/hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.

### Using a custom value

<UsingACustomValue utilities={["p", "px", "pb"]} name="padding" variable="padding" value="5px" />

### Responsive design

<ResponsiveDesign property="padding" defaultClass="py-4" featuredClass="py-8" />

## Customizing your theme

<CustomizingYourSpacingScale utilities={["p", "px", "py", "ps", "pe", "pt", "pr", "pb", "pl"]} />