Tailwind Space Between
Tailwind Space Between is a powerful property that allows you and other designers to easily add equal spacing between multiple elements without the need for custom CSS.
In this article, we’ll explore what Tailwind Space Between is, how it works, and how you can use it in your websites.
Table Of Content-
What is Tailwind Space Between?
Tailwind Space Between adds equal spacing between multiple elements. This spacing can be added either horizontally or vertically, depending on the direction specified.
It is built into the Tailwind CSS framework, making it easy to use and customize.
It enables us to evenly space child elements within a container, whether it’s a flex, grid, or regular div container.
This property is used to create consistent and uniform spacing between child elements, resulting in a more compact layout that is aesthetically pleasing and easier to read.
By applying the space-between, we can ensure that elements are placed uniformly, making the design more cohesive and visually appealing.
Tailwind Space Between Classes
The space between classes present in Tailwind are listed below:
| Classes | Overview |
| space-x-0 | Used to set the margin left property of every child element to zero. |
| space-y-0 | The margin top property of child elements is set to zero. |
| space-x-0.5 | The margin left property of every child element is set to 0.125rem or 2px. |
| space-y-0.5 | The margin top property of every child element is defined as 0.125rem or 2px. |
| space-x-1 | This class is used to specify the margin left property of child elements inside a container to 0.25rem or 4px. |
| space-y-1 | Using this class, the margin top property of every child inside a container is set to 0.25rem or 4px. |
| space-x-1.5 | In this case, the margin left property is specified as 0.375rem or 6px for all child elements. |
| space-y-1.5 | By using this class, we can define the margin top property for all child elements as 0.375rem or 6px. |
| space-x-2 | Margin left of 0.5rem or 8px is applied to all child elements. |
| space-y-2 | Margin top of 0.5rem or 8px is applied to all child elements. |
| space-x-2.5 | The margin left property for every child element is defined as 0.625rem or 10px. |
| space-y-2.5 | Using this class, the margin top property for all child elements is defined as 0.625rem or 10px. |
| space-x-3 | In this case, the margin left property for all child elements is specified as 0.75rem or 12px. |
| space-y-3 | Applies a margin top of 0.75rem or 12px to every child element. |
| space-x-3.5 | This class is used to set the margin left of every child element inside a container to 0.875rem or 14px. |
| space-y-3.5 | This class helps in setting the margin top property of every child element inside a container to 0.875rem or 14px. |
| space-x-4 | The margin left of every child element is defined as 1rem or 16px. |
| space-y-4 | The margin top for all child elements is specified as 1rem or 16px. |
| space-x-5 | Used to set the margin left property of every child element inside a container to 1.25rem or 20px. |
| space-y-5 | In this case, the margin top for every child element is set to 1.25rem or 20px. |
| space-x-6 | By using this class, we can set the margin left of every child element to 1.5rem or 24px. |
| space-y-6 | This class ensures that the margin top of every child element is defined as 1.5rem or 24px. |
| space-x-7 | The purpose of this class is to set the left margin of each child element inside a container to a value of 1.75rem or 28px. |
| space-y-7 | A value of 1.75rem or 28px is set for the top margin of every child element. |
| space-x-8 | This class sets the left margin of each child element inside a container to 2rem or 32px. |
| space-y-8 | Each child element inside a container has a top margin of 2rem or 32px. |
| space-x-9 | It sets the left margin of each child element inside a container to 2.25rem or 36px. |
| space-y-9 | Child elements inside a container have a top margin of 2.25rem or 36px with this class. |
| space-x-10 | Each child element in a container will have a left margin of 2.5rem or 40px when using this class. |
| space-y-10 | Using this class you can set the top margin of each child element inside a container to 2.5rem or 40px. |
| space-x-11 | This class is used to define the margin left of all child elements as 2.75rem or 44px. |
| space-y-11 | In this case, the margin top property of all child elements is specified as 2.75rem or 44px. |
| space-x-12 | The margin left property of all child elements is set as 3 rem or 48px. |
| space-y-12 | By using this class, the margin top property of every child element is defined as 3rem or 48px. |
| space-x-14 | Using this class, we can define the margin left of every child element as 3.5rem or 56px. |
| space-y-14 | This class is used to apply a margin top property of 3.5rem or 56px to all child elements inside a container. |
| space-x-16 | Applies a margin left of 4rem or 64px to all child elements present in a container. |
| space-y-16 | The margin top of all child elements is defined as 4rem or 64px. |
| space-x-20 | All child elements in a container are given a margin left of 5rem or 80px. |
| space-y-20 | Margin top of 5rem or 80px is applied to all child elements. |
| space-x-24 | Each child element in a container is given a margin left of 6rem or 96px. |
| space-y-24 | Container child elements have a top margin of 4rem or 64px when this class is used. |
| space-x-28 | All child elements within a container are given a margin left of 7rem or 112px. |
| space-y-28 | Ensures that all child elements in a container have a margin top of 7rem or 112px. |
| space-x-32 | Each child element in a container is surrounded by a margin left of 8rem or 128px. |
| space-y-32 | The margin top of every child element in a container is 8rem or 128px. |
| space-x-36 | This class ensures that the margin left of every child element is defined as 9rem or 144px. |
| space-y-36 | This class is used to set the margin top of every child element to 9rem or 144px. |
| space-x-40 | In this case, the margin left of all child elements is defined as 10 rem or 160px. |
| space-y-40 | Used to set the top margin of all child elements as 10rem or 160px. |
| space-x-44 | The left margin of all child elements is specified as 11rem or 176px. |
| space-y-44 | This class applies a top of margin of 11rem or 176px to all child elements. |
| space-x-48 | Using this class, the margin left of all child elements is set to 12rem or 192px. |
| space-y-48 | Container child elements have a top margin of 12rem or 192px when this class is used. |
| space-x-52 | All child elements within a container are given a margin left of 13rem or 208px. |
| space-y-52 | This class ensures that the margin top of every child element is defined as 13rem or 208px. |
| space-x-56 | Each child element in a container is given a margin left of 14rem or 224px. |
| space-y-56 | The purpose of this class is to set the top margin of each child element inside a container to a value of 14rem or 224px. |
| space-x-60 | A value of 15rem or 240px is set as the left margin of every child element. |
| space-y-60 | All child elements within a container are given a margin top of 15rem or 240px. |
| space-x-64 | This class applies a margin left of 16rem or 256px to all child elements inside a container. |
| space-y-64 | Ensures that all child elements in a container have a margin top of 16rem or 256px. |
| space-x-72 | Each child element in a container is surrounded by a margin left of 18rem or 288px. |
| space-y-72 | The margin top of every child element in a container is 18rem or 288px. |
| space-x-80 | In this case, the margin left property for all child elements is specified as 20rem or 320px. |
| space-y-80 | Using this class, the margin top property of all child elements is defined as 20rem or 320px. |
| space-x-96 | This class is used to set the margin left property of all child elements inside a container to 24 rem or 384px. |
| space-y-96 | By using this class, we can define the margin top property for all child elements as 24rem or 384px. |
| space-x-px | Margin left of 1px is applied to all child elements. |
| space-y-px | Margin top of 1px is applied to all child elements. |
| space-x-reverse | This class is used to reverse the order of horizontally displayed child elements of a parent container. |
| space-y-reverse | A parent container’s vertically displayed child elements are reversed using this class. |
Syntax
<element class="space-y-0">...</element>
Tailwind Space Between works by adding margins to the elements between which you want to add space.
The amount of space added is determined by the size specified.
This example is used to demonstrate the usage of space between classes responsible for vertical spacing:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Space Between class in Tailwind CSS</p>
<div class="flex justify-evenly">
<div class="w-1/4 space-y-4 font-medium">
<p class="my-2">space-y-4</p>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">1</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">2</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">3</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">4</div>
</div>
<div class="w-1/4 space-y-7 font-medium">
<p class="my-2">space-y-7</p>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">1</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">2</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">3</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">4</div>
</div>
<div class="w-1/4 space-y-10 font-medium">
<p class="my-2">space-y-10</p>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">1</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">2</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">3</div>
<div class="bg-green-400 h-8 rounded-lg
border-2 border-green-800">4</div>
</div>
</div>
</body>
</html>
Below example illustrates Tailwind space between classes that help in horizontal spacing between child elements:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Space Between class in Tailwind CSS</p>
<div class="flex flex-col justify-evenly space-y-6 my-4">
<div class="w-full flex items-center space-x-3 font-medium">
<p class="my-2">space-x-3</p>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">1</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">2</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">3</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">4</div>
</div>
<div class="w-full flex items-center space-x-6 font-medium">
<p class="my-2">space-x-6</p>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">1</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">2</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">3</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">4</div>
</div>
<div class="w-full flex items-center space-x-12 font-medium">
<p class="my-2">space-x-12</p>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">1</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">2</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">3</div>
<div class="bg-amber-300 w-16 rounded-lg
border-2 border-black">4</div>
</div>
</div>
</body>
</html>
Tailwind Space Between Benefits
Incorporating Tailwind Space Between in your websites can provide a range of advantages, which includes:
- By adding equal spacing between elements, Tailwind Space Between can improve the readability of your design. This can make it easier for users to scan and navigate your content, improving their overall experience.
- Tailwind Space Between allows you to add consistent spacing between elements, making it easier to create a cohesive and polished design. This can help you maintain consistency throughout your design project.
- By using Tailwind Space Between, you can save time and effort when designing and developing your project. It eliminates the need for custom CSS, allowing you to focus on other aspects of your design project.
- Tailwind Space Between is customizable, allowing you to adjust the amount of spacing to fit your design needs. You can also combine it with other Tailwind utilities to create unique and customized designs.
- Tailwind Space Between can be used in a variety of design projects, including web design, user interfaces, and print design. It is a versatile tool that can help you create a wide range of designs quickly and easily.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
