Spacing Utility Classes
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.). |
What are the Spacing Utility Classes in Tailwind CSS ?
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.