Padding X and Y
For scenarios where you want to apply the same padding value to the top and bottom (Y-axis) or right and left (X-axis), Tailwind offers px- and py- utilities.
Example: This example adds the padding on X and Y axis.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>X and Y Axis Padding</title> <link href= "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="m-4"> <div class="px-6 py-4 w-48 h-24 bg-green-200"> This div has uniform padding on the X-axis and Y-axis. </div> </body> </html> |
Output
The px-6 class applies a padding of 1.5rem (24px) to both the right and left sides, while py-4 applies a padding of 1rem (16px) to both the top and bottom sides.
How to Add Padding to All Sides in Tailwind CSS ?
Tailwind CSS is a utility-first CSS framework that provides a vast array of classes to design your website directly in your markup. It emphasizes speed, efficiency, and reduces the time you spend styling in CSS files. One of the most common styling tasks in web development is adding padding to elements, which creates space around an element’s content, inside of any defined borders. Tailwind CSS offers a basic and flexible approach to add padding to all sides of an element or each side individually.