ContextQMD
Back to Tailwindcss

Padding

src/docs/padding.mdx

latest7.5 KB
Original Source

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"], ["pbs", "padding-block-start"], ["pbe", "padding-block-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 to conditionally apply specific styles depending on the current text direction.

Use the pbs-<number> and pbe-<number> utilities to set the padding-block-start and padding-block-end logical properties, which map to either the top or bottom side based on the writing mode:

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

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", "pbs", "pbe", "pt", "pr", "pb", "pl"]} />