Tailwind CSS Spacing

In Tailwind CSS, spacing is an important part of layout.

Spacing refers to the distance between elements, including padding, margin, line-height, letter-spacing, etc.

Tailwind CSS provides some commonly used utility classes, making the setting of these spacings easier and more intuitive.

Margin

Margin is used to control the distance between an element and other elements. Tailwind provides concise utility classes to set margins. The common format ism-{size}, wheremrepresents margin,{size}is the specific value.

  • m-{size}: Sets margin in all four directions.
  • mt-{size}: Sets the top margin (margin-top).
  • mr-{size}: Sets the right margin (margin-right).
  • mb-{size}: Sets the bottom margin (margin-bottom).
  • ml-{size}: Sets the left margin (margin-left).
  • mx-{size}: Sets the horizontal margin (left and right margins).
  • my-{size}: Sets the vertical margin (top and bottom margins).

Common margin values:

  • m-0: Sets the margin to 0.
  • m-1tom-64: Sets margins of different sizes, by default based onremunits.
  • m-px: Sets the margin to 1px.
  • m-auto: Sets the margin to auto, commonly used for center alignment.

Usemt-*、mr-*、mb-*andml-*utility classes to control the margin on one side of an element.

For example,mt-6adds a 1.5rem margin to the top of the element,mr-4adds a 1rem margin to the right of the element,mb-8adds a 2rem margin to the bottom of the element, andml-2adds a 0.5rem margin to the left of the element.

Example

<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-2 ...">ml-2</div>

Try it Yourself »

In this example,mt-6sets the top margin of the element,mr-4sets the right margin,mb-8sets the bottom margin,ml-2sets the left margin.

Usemx-*utilities to control the horizontal margin of an element.

<div class="mx-8 ...">mx-8</div>

Usemy-*utilities to control the vertical margin of an element.

<div class="my-8 ...">my-8</div>

Usem-*utilities to control the margin on all sides of an element.

<div class="m-8 ...">m-8</div>

Padding

Padding is used to control the distance between an element's content and its border.

Like margin, Tailwind also provides rich utility classes for padding.

  • p-{size}: Sets padding in all four directions.
  • pt-{size}: Sets the top padding (padding-top).
  • pr-{size}: Sets the right padding (padding-right).
  • pb-{size}: Sets the bottom padding (padding-bottom).
  • pl-{size}: Sets the left padding (padding-left).
  • px-{size}: Sets the horizontal padding (left and right padding).
  • py-{size}: Sets the vertical padding (top and bottom padding).

    • Common padding values:

  • p-0: Sets the padding to 0.
  • p-1top-64: Sets padding of different sizes.
  • p-px: Sets the padding to 1px.

Example

<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>

Try it Yourself »

Usepx-*utilities to control the horizontal padding of an element.

<div class="px-8 ...">px-8</div>

Usepy-*utilities to control the vertical padding of an element.

<div class="py-8 ...">py-8</div>

Usep-*utilities to control the padding on all sides of an element.

<div class="p-8 ...">p-8</div>

Useps-*andpe-*utilities to set the padding-inline-start and padding-inline-end logical properties, which map to the left or right side depending on the text direction.

Example

<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>

Try it Yourself »

Line Height

Line height controls the vertical spacing between lines of text.

Tailwind provides leading-{size} utility classes to adjust line height.

Common line height values:

  • leading-none: Sets the line height to 1 (no spacing).
  • leading-tight: Sets the line height to a more compact value.
  • leading-snug, leading-normal, leading-loose: Provides different line height values.
  • leading-{size}: Sets an exact line height using a specified unit.

Example

<p class="leading-tight">This is compact text.</p>
<p class="leading-loose">This is looser text.</p>

Try it Yourself »

Letter Spacing

Letter spacing controls the horizontal spacing between text characters.

Tailwind uses tracking-{size} utility classes to adjust letter spacing.

Common letter spacing values:

  • tracking-tight: Decreases letter spacing.
  • tracking-normal: Sets normal letter spacing.
  • tracking-wide: Increases letter spacing.
  • tracking-{size}: Sets letter spacing using a specified unit.

Example

<p class="tracking-tight">Compact text</p>
<p class="tracking-wide">Loose text</p>

Try it Yourself »

Gap

gap is used to set the spacing between elements in Grid or Flexbox layouts.

It adds spacing between all child elements, especially useful for creating consistent gaps in layouts.

Common gap values:

  • gap-0: Sets the gap to 0.
  • gap-1togap-64: Sets different gap values.

Example

<div class="grid gap-4 grid-cols-2">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Try it Yourself »
Other Extensions