|
Tailwind CSS provides a variety of Spacing Utility classes that allow you to control the spacing of elements in your layout. These classes are named based on the spacing scale provided by Tailwind.
Spacing Utility Classes
Here are some of the key spacing utility classes in Tailwind CSS.
Margin (m-[size])
Margin is the space outside the boundaries of an element. It controls the distance between the element’s border and its surrounding elements.
| Classes |
Description |
m-0 |
Margin 0 (No margin). |
m-1, m-2, … m-10 |
Margin with increasing spacing values. |
m-auto |
Auto margin, centring the element. |
m-[size] |
Margin with custom size (replace [size] with px, 1/2, full, etc.). |
mx-[size] |
Horizontal margin with custom size. |
my-[size] |
Vertical margin with custom size. |
mt-[size] |
Margin-top with custom size. |
mb-[size] |
Margin-bottom with custom size. |
ml-[size] |
Margin-left with custom size. |
mr-[size] |
Margin-right with custom size. |
Padding (p-[size])
Padding is the space inside the boundaries of an element. It controls the distance between the element’s content and its border.
| Classes |
Description |
p-0 |
Padding 0 (No padding). |
p-1, p-2, … p-10 |
Padding with increasing spacing values. |
p-[size] |
Padding with custom size (replace [size] with px, 1/2, full, etc.). |
px-[size] |
Horizontal padding with custom size. |
py-[size] |
Vertical padding with custom size. |
pt-[size] |
Padding-top with custom size. |
pb-[size] |
Padding-bottom with custom size. |
pl-[size] |
Padding-left with custom size. |
pr-[size] |
Padding-right with custom size. |
Gap (gap-[size])
In the context of grid or flex container layouts, “gap” refers to the space between individual grid or flex items. It defines the separation between adjacent items in a grid or flex container.
| Classes |
Description |
gap-0 |
Gap 0 (No gap). |
gap-1, gap-2, … gap-10 |
Gap with increasing spacing values. |
gap-[size] |
Gap with custom size (replace [size] with px, 1/2, full, etc.). |
gap-x-[size] |
Horizontal gap with custom size. |
gap-y-[size] |
Vertical gap with custom size. |
Space Between (space-x-[size], space-y-[size])
Space-between is a property that aligns items such that there is space between them.
| Classes |
Description |
space-x-0, space-y-0 |
Space 0 (No space in the horizontal or vertical direction). |
space-x-1, space-y-1, … space-x-10, space-y-10 |
Space with increasing spacing values. |
space-x-[size], space-y-[size] |
Space with custom size (replace [size] with px, 1/2, full, etc.). |
|
