Tailwind CSS - Padding

Previous
Quiz
Next

Padding is an important property that is used to create inner space on any element. The CSS padding properties can be replaced by the Tailwind CSS padding classes.

Tailwind CSS Padding Classes

Below mentioned classes can be used to control the padding of an element.

Class Description
p-* This class with a valid value like p-0, p-0.5, p-1, p-1.5, etc., can be used to add padding.
py-* This class with a valid value like py-0, py-0.5, py-1, py-1.5, etc., can be used to add vertical padding.
px-* This class with a valid value like px-0, px-0.5, px-1, px-1.5, etc., can be used to add horizontal padding.
pt-* This class with a valid value like pt-0, pt-0.5, pt-1, pt-1.5, etc., can be used to add padding top.
pr-* This class with a valid value like pr-0, pr-0.5, pr-1, pr-1.5, etc., can be used to add padding right.
pb-* This class with a valid value like pb-0, pb-0.5, pb-1, pb-1.5, etc., can be used to add padding bottom.
pl-* This class with a valid value like pl-0, pl-0.5, pl-1, pl-1.5, etc., can be used to add padding left.
ps-* This class with a valid value like ps-0, ps-0.5, ps-1, ps-1.5, etc., can be used to add padding inline start.
pe-* This class with a valid value like pe-0, pe-0.5, pe-1, pe-1.5, etc., can be used to add padding inline end.

Note: The *(astrick) can have the value from 0 to any valid acceptable number.

Tailwind CSS Padding Classes Examples

In the below examples, we see the use cases of a few above-mentioned classes. You can try different values on your own by changing the code.

Add Padding to All Sides

Here in this article, we will create padding to all sides on each element with different values using the Tailwind CSS 'p-*' class.

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 Padding
        </p>
        <p>
            The light green section of the below
            squares is the padding area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Padding Class is Used on Parent div-->
            <div class="p-0 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">p-0</div>
            </div>
            <div class="p-1 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">p-1</div>
            </div>
            <div class="p-2 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">p-2</div>
            </div>
            <div class="p-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">p-4</div>
            </div>
        </div>
</body>
</html>

Add Padding to Single Sides

In the following example, we have used four different classes like 'pt-*', 'pr-*', 'pb-*', and 'pl-*' to set the padding on four different elements's individual sides.

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 Padding
        </p>
        <p>
            The light green section of the below
            squares is the padding area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Padding Class is Used on Parent div-->
            <div class="pt-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">pt-4</div>
            </div>
            <div class="pr-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">pr-4</div>
            </div>
            <div class="pb-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">pb-4</div>
            </div>
            <div class="pl-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">pl-4</div>
            </div>
        </div>
</body>

</html>

X Axis Padding

Here in this example, we will use the 'px-*' class, with different values for different elements.

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 Padding
        </p>
        <p>
            The light green section of the below
            squares is the padding area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Padding Class is Used on Parent div-->
            <div class="px-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">px-4</div>
            </div>
        </div>
</body>

</html>

Y Axis Padding

Here in this example, we will use the 'py-*' class, with different values for different elements.

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 Padding
        </p>
        <p>
            The light green section of the below
            squares is the padding area.
        </p>
        <div class="text-center">
            <!-- Tailwind CSS Padding Class is Used on Parent div-->
            <div class="py-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">py-4</div>
            </div>
        </div>
</body>

</html>

Logical Padding

In the following example, we are setting padding depending on the content direction by using 'ps-*' and 'pe-*' classes.

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 Padding
        </p>
        <p>
            The light green section of the below
            squares is the padding area.
        </p>
        <div class="text-center" dir="ltr">
            <!-- Tailwind CSS Padding Class is Used on Parent div-->
            <div class="ps-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">ps-4</div>
            </div>
            <div class="pe-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">pe-4</div>
            </div>
        </div>
        <div class="text-center" dir="rtl">
            <!-- Tailwind CSS Padding Class is Used on Parent div-->
            <div class="ps-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">ps-4</div>
            </div>
            <div class="pe-4 m-2 border border-green-600 bg-green-200 w-max">
                <div class="bg-green-600 w-16 h-16">pe-4</div>
            </div>
        </div>
</body>

</html>
Print Page
Previous
Next