Tailwind CSS Padding
This class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Padding Property. This class is used to generate space inside any defined boundary around the element.
Different padding can be selected for each side (top, right, bottom, left). To implement padding properties, border properties must be included. CSS padding-top, CSS padding-bottom, CSS padding-right, CSS padding-left, and so on are all CSS padding properties.
Padding classes
- p-0: The padding on all sides is defined by this class.
- py-0: The padding-top and padding-bottom properties on the y-axis are defined by this class.
- px-0: This class is used to specify x-axis padding, such as padding-left and padding-right.
- pt-0: This class is used to provide padding to the top of the page.
- pr-0: This class is used to add right-hand padding.
- pb-0: This class is used to add padding to the bottom of the page.
- pl-0: This class is used to add padding to the left side of the page.
Note: You can replace "0" with any of the allowed "rem" values.
p-0
The padding on all sides is defined by this class.
Syntax:
<element class="p-0">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Padding Class - Tailwind CSS </b> <div class="flex justify-center"> <div class="p-4 bg-red-300 w-24 h-24"> <div class="border-2 border-red-800 bg-red-600 w-16 h-16"> </div> </div> </div> </body> </html>
Output:
py-0
The padding-top and padding-bottom properties on the y-axis are defined by this class.
Syntax:
<element class="py-0">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Padding Class - Tailwind CSS </b> <div class="flex justify-center"> <div class="py-4 bg-red-300 w-24 h-24"> <div class="border-2 border-red-800 bg-red-600 w-16 h-16"> </div> </div> </div> </body> </html>
Output:
px-0
This class is used to specify x-axis padding, such as padding-left and padding-right.
Syntax:
<element class="px-0">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Padding Class - Tailwind CSS </b> <div class="flex justify-center"> <div class="px-4 bg-red-300 w-24 h-24"> <div class="border-2 border-red-800 bg-red-600 w-16 h-16"> </div> </div> </div> </body> </html>
Output:
pt-0
This class is used to provide padding to the top of the page.
Syntax:
<element class="pt-0">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Padding Class - Tailwind CSS </b> <div class="flex justify-center"> <div class="pt-4 bg-red-300 w-24 h-24"> <div class="border-2 border-red-800 bg-red-600 w-16 h-16"> </div> </div> </div> </body> </html>
Output:
pr-0
This class is used to add right-hand padding.
Syntax:
<element class="pr-0">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Padding Class - Tailwind CSS </b> <div class="flex justify-center"> <div class="pr-4 bg-red-300 w-24 h-24"> <div class="border-2 border-red-800 bg-red-600 w-16 h-16"> </div> </div> </div> </body> </html>
Output:
pb-0
This class is used to add padding to the bottom of the page.
Syntax:
<element class="pb-0">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Padding Class - Tailwind CSS </b> <div class="flex justify-center"> <div class="pb-4 bg-red-300 w-24 h-24"> <div class="border-2 border-red-800 bg-red-600 w-16 h-16"> </div> </div> </div> </body> </html>
Output:
pl-0
This class is used to add padding to the left side of the page.
Syntax:
<element class="pl-0">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Padding Class - Tailwind CSS </b> <div class="flex justify-center"> <div class="pl-8 bg-red-300 w-24 h-24"> <div class="border-2 border-red-800 bg-red-600 w-16 h-16"> </div> </div> </div> </body> </html>
Output:
