TailwindCSS Padding and Margin

Similar to the way we add width and height to our HTML elements we can also apply padding and margin to our elements with utility classes.

Padding

Here's a quick example of adding padding inside of an element.

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

Here is how our element will look:

TailwindCSS Padding Example

You can see that by adding the padding utility class p-5, we have added 5 units of measure (or 1.25rem) of padding to our element. We can also apply this padding to all sides (top, right, bottom, and left) separately. Take a look at the following example of adding separate padding to each side:

<div class=“pt-2 pr-5 pb-2 pl-5 bg-gray-200”>Awesome</div>

Notice, I've also added a light gray background to each of these elements, this is so that way we can actually see the element and visualize the padding.

Here is how that padding will look below:

Padding on different sides

We could also add padding to the top and bottom by utilizing the px and py utility classes like so:

<div class="py-2 px-5 bg-gray-200">Awesome</div>

As you can see there are many ways to add padding to our element to stylize it the way we would like.

Margin

In the same way that we applied padding to our elements we can also use similar utility classes to apply margin to our elements.

<div class="m-10 bg-gray-200">Rad</div>

Here's a live example of that element with margin applied.

TailwindCSS Margin Example

We can also apply margin separately to the top, bottom, left, right, x-axis, and y-axis similarly to how we add padding.

Be sure to checkout the TailwindCSS documentation to see all the different units of measurement that can be applied to the margin and padding of an element.