Tailwind CSS Padding
Padding is used to create space around an element's
content, inside of any defined borders.
Utilities for controlling an element's padding.
Class
Properties
-
p-0
This class is used to define the padding on all sides.
-
py-0
This class defines padding on the y-axis (padding-top and padding-bottom).
-
px-0
This class defines padding on the x-axis (padding-left and padding-right).
-
pt-0
This class is specifically used to add padding on top.
-
pr-0
This class is specifically used to add padding on the right.
-
pb-0
This class is specifically used to add padding on the bottom.
-
pl-0
This class is specifically used to add padding on the left.
Tailwind css Padding
This class is used to define the padding on all sides.
This class is used to define the padding on all sides. For ex. This parent Div is containing class ( p-10 ) This class is provide 40px of Padding form all sides.
<div class="border-2 border-indigo-600 w-full h-auto p-10 rounded-lg">
<p class="text-lg font-medium text-gray-900">
This class is used to define the padding on all sides. For ex. This parent Div is containing class <span
class="whitespace-nowrap text-indigo-600 font-bold text-xl"> ( p-10 ) </span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span> of Padding form all sides.</p>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Tailwind css padding on the y-axis
This class defines padding on the y-axis (padding-top and padding-bottom).
This class is used to define the padding on Tob and Bottom sides. For ex. This parent Div is containing class ( py-10 ) This class is provide 40px of Padding form Y-axis (padding-top and padding-bottom).
<div class="border-2 border-indigo-600 w-full h-auto py-10 rounded-lg">
<p class="text-lg font-medium text-gray-900">
This class is used to define the padding on Tob and Bottom sides. For ex. This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
py-10)</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Padding form Y-axis (padding-top and padding-bottom).</p>
</div>Tailwind css padding on the x-axis
This class defines padding on the y-axis (padding-left and padding-right).
This class is used to define the padding on Left and Right sides. For ex. This parent Div is containing class ( px-10 ) This class is provide 40px of Padding form x-axis (padding-left and padding-right).
<div class="border-2 border-indigo-600 w-full h-auto px-10 rounded-lg">
<p class="text-lg font-medium text-gray-900">
This class is used to define the padding on left and right sides. For ex. This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
px-10)</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Padding form X-axis (padding-left and padding-right).</p>
</div>Tailwind css padding on the Top
This class defines padding on the top (padding-top).
This class is used to define the padding on Top sides. For ex. This parent Div is containing class ( pt-10 ) This class is provide 40px of Padding form Top (padding-top).
<div class="border-2 border-indigo-600 w-full h-auto pt-10 rounded-lg">
<p class="text-lg font-medium text-gray-900">
This class is used to define the padding on Top sides. For ex. This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
pt-10)</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Padding form Top (padding-top).</p>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Tailwind css padding on the Right
This class defines padding on the Right (padding-right).
This class is used to define the padding on Right sides. For ex. This parent Div is containing class ( pr-10 ) This class is provide 40px of Padding form Right (padding-right).
<div class="border-2 border-indigo-600 w-full h-auto pr-10 rounded-lg">
<p class="text-lg font-medium text-gray-900">
This class is used to define the padding on Right sides. For ex. This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
pr-10)</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Padding form Right (padding-right).</p>
</div>Tailwind css padding on the Bottom
This class defines padding on the Bottom (padding-bottom).
This class is used to define the padding on Bottom sides. For ex. This parent Div is containing class ( pb-10 ) This class is provide 40px of Padding form Bottom (padding-bottom).
<div class="border-2 border-indigo-600 w-full h-auto pr-10 rounded-lg">
<p class="text-lg font-medium text-gray-900">
This class is used to define the padding on Right sides. For ex. This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
pr-10)</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Padding form Right (padding-right).</p>
</div>Tailwind css padding on the Left
This class defines padding on the Left (padding-left).
This class is used to define the padding on Left sides. For ex. This parent Div is containing class ( pl-10 ) This class is provide 40px of Padding form Left (padding-left).
<div class="border-2 border-indigo-600 w-full h-auto pr-10 rounded-lg">
<p class="text-lg font-medium text-gray-900">
This class is used to define the padding on Right sides. For ex. This
parent Div is containing class <span class="whitespace-nowrap text-indigo-600 font-bold text-xl">(
pr-10)</span> This class is provide <span
class="whitespace-nowrap text-indigo-600 font-bold text-lg">40px</span>
of Padding form Right (padding-right).</p>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More