Tailwind CSS Padding

The padding utility class sets the padding of an element. It is used to create space within or outside of an element.

Syntax

The syntax for using the padding utility class is as follows:

<div class="p-{size}"></div>

Here, {size} is the size of the padding you want to apply.

The size can be one of the following:

Size	Class
0	p-0
1	p-1
2	p-2
3	p-3
4	p-4
5	p-5
6	p-6
8	p-8
10	p-10
12	p-12
16	p-16
20	p-20
24	p-24
32	p-32
40	p-40
48	p-48
56	p-56
64	p-64

You can also specify different padding values for each side of the element. For example:

<div class="pt-2 pr-4 pb-6 pl-8"></div>

Here, pt-2 sets a padding of 2px only on the top of the element, pr-4 sets a padding of 4px only on the right of the element, pb-6 sets a padding of 6px only on the bottom of the element, and pl-8 sets a padding of 8px only on the left of the element.

Example

<div class="p-4 bg-gray-200"></div>

Output

This will create a <div> element with a padding of 16px and a background color of light gray.

Explanation

The p-4 class sets a padding of 16px on all sides of the element. The bg-gray-200 class sets the background color of the element to light gray.

Use

Use the padding utility class to add space around the content of an element. You can use it to add whitespace between elements, to create a margin around an image, or to add space between the border of an element and its content.

Important Points

• The padding classes are named using the format p-{size}.
• You can specify different padding values for each side of the element using pt-{size}, pr-{size}, pb-{size}, and pl-{size}.
• The size of the padding can range from 0 to 64, in increments of 1.
• Padding classes can be combined with other utility classes to create more complex designs.

Summary

The padding utility class is a part of Tailwind CSS that sets the padding of an element. It is used to create space within or outside of an element. You can specify the padding size using a class name of the format p-{size}, where {size} can range from 0 to 64. You can also specify different padding values for each side of the element using pt-{size}, pr-{size}, pb-{size}, and pl-{size}. The padding utility class can be used to add whitespace between elements, to create a margin around an image, or to add space between the border of an element and its content.