Tailwind CSS Padding
Last Updated :
23 Mar, 2022
This class accepts lots of values in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS Padding Property. This class is used to create space around the element, inside any defined border. We can set different paddings for individual sides (top, right, bottom, left). It is important to add border properties to implement padding properties. There are lots of CSS properties used for padding like CSS padding-top, CSS padding-bottom, CSS padding-right, CSS padding-left, etc.
Padding classes:
- p-0: This class is used to define the padding on all the sides.
- py-0: This class is used to define padding on the y-axis i.e padding-top and padding-bottom.
- px-0: This class is used to define padding on the x-axis i.e padding-left and padding-right.
- pt-0: This class is specially used to add padding on top.
- pr-0: This class is specially used to add padding on right.
- pb-0: This class is specially used to add padding on the bottom.
- pl-0: This class is specially used to add padding on left.
Note: You can change the number “0” with the valid “rem” values.
p-0: This class is used to define the padding on all the sides.
Syntax:
<element class="p-0">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Padding Class</b>
<div class="flex justify-center">
<div class="p-4 bg-green-300 w-24 h-24">
<div class="border-2 border-green-800
bg-green-600 w-16 h-16">
</div>
</div>
</div>
</body>
</html>
|
Output:
py-0: This class is used to define padding on the y-axis means padding-top and padding-bottom.
Syntax:
<element class="py-0">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Padding Class</b>
<div class="flex justify-center">
<div class="py-4 bg-green-300 w-24 h-24">
<div class="border-2 border-green-800
bg-green-600 w-16 h-16">
</div>
</div>
</div>
</body>
</html>
|
Output:
px-0: This class is used to define padding on the x-axis means padding-left and padding-right.
Syntax:
<element class="px-0">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Padding Class</b>
<div class="flex justify-center">
<div class="px-4 bg-green-300 w-24 h-24">
<div class="border-2 border-green-800
bg-green-600 w-16 h-16">
</div>
</div>
</div>
</body>
</html>
|
Output:
pt-0: This class is specially used to add padding on top.
Syntax:
<element class="pt-0">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Padding Class</b>
<div class="flex justify-center">
<div class="pt-4 bg-green-300 w-24 h-24">
<div class="border-2 border-green-800
bg-green-600 w-16 h-16">
</div>
</div>
</div>
</body>
</html>
|
Output:
pr-0: This class is specially used to add padding on right.
Syntax:
<element class="pr-0">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Padding Class</b>
<div class="flex justify-center">
<div class="pr-4 bg-green-300 w-24 h-24">
<div class="border-2 border-green-800
bg-green-600 w-16 h-16">
</div>
</div>
</div>
</body>
</html>
|
Output:
pb-0: This class specially used to add padding on the bottom.
Syntax:
<element class="pb-0">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Padding Class</b>
<div class="flex justify-center">
<div class="pr-4 bg-green-300 w-24 h-24">
<div class="border-2 border-green-800
bg-green-600 w-16 h-16">
</div>
</div>
</div>
</body>
</html>
|
Output:
pl-0: This class specially used to add padding on the left.
Syntax:
<element class="pl-0">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Padding Class</b>
<div class="flex justify-center">
<div class="pl-8 bg-green-300 w-24 h-24">
<div class="border-2 border-green-800
bg-green-600 w-16 h-16">
</div>
</div>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...