Spacing

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:

        
            


    <!-- Call to action -->
    <div class="text-center text-white">
      <h1 class="mb-5 text-5xl font-semibold">I am learning Tailwind</h1>
      <h2 class="mb-7 text-2xl font-medium">
        And what an exciting adventure it is!
      </h2>
    </div>

    
        
    

Now they can breathe freely!

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.