Tailwind CSS - Spacing


Tailwind CSS Spacing includes the Padding, Margin and Space Between. These are important concepts of tailwind spacing, to create inner or outer space on any elements you will need padding and margin. If you want to add a fixed space between child elements, then space between is required.

Tailwind CSS Spacing Reference

Below mentioned topics can be used to create spacing on elements.

Topic Description Example
Tailwind CSS - Padding Padding is used to create inner space on any element.
Tailwind CSS - Margin Margin is used to create outer space on any element.
Tailwind CSS - Space Between Space Between is used to create gaps or space between child elements of any container.

Example of Tailwind CSS Spacing

In the following example, we will cover any one class from each of the of the above mentioned topics.

Example

<!DOCTYPE html>
<html>
<head>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio">
    </script>
</head>

<body>
    <div class="m-5">
        <p class="text-3xl font-bold">
            Tailwind CSS Spacing
        </p>
        <p>
            It may seems that Padding and Margin is giving the 
            same outcome but there is catch. We have applied the 
            padding class on parent div and margin class on child div.
        </p>
        <div>
            <p class="text-xl font-bold">
                Tailwind CSS Padding
            </p>
            <div class="p-4 m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16"></div>
            </div>
            <p class="text-xl font-bold">
                Tailwind CSS Margin
            </p>
            <div class="m-2 border border-green-600 
                        bg-green-200 w-max">
                <div class="m-4 bg-green-600 w-16 h-16"></div>
            </div>
            <p class="text-xl font-bold">
                Tailwind CSS Space Between
            </p>
            <div class="flex space-x-4">
                <div class="bg-green-600 w-16 h-16"></div>
                <div class="bg-green-600 w-16 h-16"></div>
            </div>
        </div>
</body>

</html>