The elements in Call to action are very close to each other, which makes them seem squeezed. I don't know about you, but I have the impression that they are asking for some space and breath.

This is exactly what Tailwind's spacing utilities classes are for - they allow us to offset elements in 4 directions - up, down, left and right.

Thanks to spacing utilities we can easily manipulate padding and margin of any element.

For example - if you want to add a bottom margin to an <h1> element you can add class mb- ("m" for "margin" and "b" for "bottom") to it and choose a unit between 0.5 to 96.

mb-0.5: sets margin-bottom to 0.125rem (2px)

mb-96: sets margin-bottom to 24rem (384px)

Step 1 - add margin bottom to the headings

Let's add .mb-5 to h1 and .mb-7 to h2:

Now they can breathe freely!

Notice that we added a bottom margin to the h2 element as well, even though there is nothing underneath it. However, that will soon change as we will add a button there.

How spacing works in Tailwind CSS

You may have guessed that if you need to use the mb-* class to add a bottom margin, you need to add the mt-* class to add a top margin. And you will be right.

The same applies to the left and right margins - we use the ms-* and me-* classes respectively

For example:

mt-8 to add some margin to the top

ms-2 to add some margin to the left

me-4 to add some margin to the right

How to use padding

It's easy. The same scheme for margins applies to padding - so for example, .pt-4 to add some top padding, ps-5 to add some left padding, and so on.

Below is an example using classes for the right margin with a visual representation of their sizes. The same sizes apply to all directions (left, right, top, bottom) and for both margins and padding.

Class name Size Visual representation
.me-0.5 2px
.me-1 4px
.me-2 8px
.me-3 12px
.me-4 16px
.me-5 20px
.me-6 24px
.me-7 28px
.me-8 32px
.me-9 36px
And so on until:
.me-80 320px
.me-96 384px

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.