Margins & Paddings

Class names

The margin class names start with m and have a range of 0 to 12.

Class	Description	! support
m-0-12	Add a margin on all sides. m-0 means no margin.	Yes
ml-0-12	Add a margin on the left side.	Yes
ml-auto	Automatic margin on the left.	Yes
mr-0-12	Add a margin on the right side.	Yes
mr-auto	Automatic margin on the right.	Yes
mt-0-12	Adds a top margin.	Yes
mt-auto	Automatic margin on top.	No
mb-0-12	Add a bottom margin.	Yes
mx-0-12	Add a margin on the left and right sides.	Yes
my-0-12	Add a top and bottom margin.	Yes
mx-auto	Automatic margin on the left and right.	No

The padding class names start with p and have a range of 0 to 12. A few half steps are also available at the tight end of the scale - p-1.5, px-1.5, px-2.5, py-0.5 and py-1.5 - and only those. There is no half step on the single sides (pt, pb, pl, pr).

Class	Description	! support
p-0-12	Add a padding on all sides. p-0 means no padding.	Yes
p-1.5	Add a padding of 1.5 on all sides.	No
pl-0-12	Add a padding on the left side.	Yes
pl-auto	Automatic padding on the left.	Yes
pr-0-12	Add a padding on the right side.	Yes
pr-auto	Automatic padding on the right.	Yes
pt-0-12	Adds a top padding.	Yes
pb-0-12	Add a bottom padding.	Yes
px-0-12	Add a padding on the left and right sides.	Yes
px-1.5	Add a padding of 1.5 on the left and right sides.	No
px-2.5	Add a padding of 2.5 on the left and right sides.	No
py-0-12	Add a top and bottom padding.	Yes
py-0.5	Add a top and bottom padding of 0.5.	No
py-1.5	Add a top and bottom padding of 1.5.	No

Responsive margins and paddings

You can use the standard sm, md, lg and xl breakpoints for padding and margin classes (with the exception of side-specific ones - mt-*, pt-*, ml-*, pl-*, etc.).

Forcing a padding or a margin on a component

Many components already have margins and paddings set, so you may have to add ! to the beginning of the class name to apply the !important css declaration to force its use.

Margin examples

All-Round Margin

<div class="bg-primary">
  <div class="m-4 bg-secondary text-secondary-foreground">m-4</div>
</div>

<div class="bg-primary">
  <div class="m-8 bg-secondary text-secondary-foreground">m-8</div>
</div>

<div class="bg-primary">
  <div class="m-12 bg-secondary text-secondary-foreground">m-12</div>
</div>

Left Margin

<div class="bg-primary">
  <div class="ml-8 bg-secondary text-secondary-foreground">ml-8</div>
</div>

Right Margin

<div class="bg-primary">
  <div class="mr-8 bg-secondary text-secondary-foreground">mr-8</div>
</div>

Double-Sided Margin

<div class="bg-primary">
  <div class="mx-8 bg-secondary text-secondary-foreground">mx-8</div>
</div>

Top Margin

<div class="bg-primary">
  <div class="mt-8 bg-secondary text-secondary-foreground">mt-8</div>
</div>

Bottom Margin

<div class="bg-primary">
  <div class="mb-8 bg-secondary text-secondary-foreground">mb-8</div>
</div>

Responsive Margin

Responsive left and right margin based on the screen size.

<div class="bg-primary">
  <div class="mx-0 bg-secondary text-secondary sm:mx-2 md:mx-4 lg:mx-8 xl:mx-12">Responsive</div>
</div>

Top & Bottom Margin

<div class="bg-primary">
  <div class="my-8 bg-secondary text-secondary-foreground">my-8</div>
</div>

Left Auto Margin

<div class="flex bg-primary">
  <div class="bg-secondary px-2 text-secondary">Left content</div>
  <div class="ml-auto bg-secondary text-secondary-foreground">ml-auto</div>
  <div class="bg-secondary px-2 text-secondary">Right content</div>
</div>

Right Auto Margin

<div class="flex bg-primary">
  <div class="bg-secondary px-2 text-secondary">Left content</div>
  <div class="mr-auto bg-secondary text-secondary-foreground">ml-auto</div>
  <div class="bg-secondary px-2 text-secondary">Right content</div>
</div>

Top Auto Margin

Pushes an element to the bottom of a column that has room to spare.

<div class="flex flex-col bg-primary" style="height: 8rem">
  <div class="bg-secondary px-2 text-secondary-foreground">Top content</div>
  <div class="mt-auto bg-secondary px-2 text-secondary-foreground">mt-auto</div>
</div>

Padding examples

All-Round Padding

<div class="bg-primary p-4">
  <div class="bg-secondary text-secondary-foreground">p-4</div>
</div>

<div class="bg-primary p-8">
  <div class="bg-secondary text-secondary-foreground">p-8</div>
</div>

<div class="bg-primary p-12">
  <div class="bg-secondary text-secondary-foreground">p-12</div>
</div>

Left Padding

<div class="bg-primary pl-8">
  <div class="bg-secondary text-secondary-foreground">pl-8</div>
</div>

Right Padding

<div class="bg-primary pr-8">
  <div class="bg-secondary text-secondary-foreground">pr-8</div>
</div>

Double-Sided Padding

<div class="bg-primary px-8">
  <div class="bg-secondary text-secondary-foreground">px-8</div>
</div>

Responsive Margin

Responsive left and right padding based on the screen size.

<div class="bg-primary px-0 sm:px-2 md:px-4 lg:px-8 xl:px-12">
  <div class="bg-secondary text-secondary-foreground">Responsive</div>
</div>

Top Padding

<div class="bg-primary pt-8">
  <div class="bg-secondary text-secondary-foreground">pt-8</div>
</div>

Bottom Padding

<div class="bg-primary pb-8">
  <div class="bg-secondary text-secondary-foreground">pb-8</div>
</div>

Top & Bottom Padding

<div class="bg-primary py-8">
  <div class="bg-secondary text-secondary-foreground">py-8</div>
</div>

Half-Step Padding

A half step sits between its two whole neighbours.

<div class="vbox gap-2">
  <div class="bg-primary p-1"><div class="bg-secondary text-secondary-foreground">p-1</div></div>
  <div class="bg-primary p-1.5"><div class="bg-secondary text-secondary-foreground">p-1.5</div></div>
  <div class="bg-primary p-2"><div class="bg-secondary text-secondary-foreground">p-2</div></div>
</div>