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
mb- ("m" for "margin" and "b" for "bottom") to it and
choose a unit between
mb-0.5: sets margin-bottom to
mb-96: sets margin-bottom to
Step 1 - add margin bottom to the headings
<!-- 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!
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
The same applies to the left and right margins - we use the
mr-* classes respectively
mt-8 to add some margin to the top
ml-2 to add some margin to the left
mr-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,
pl-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|
|And so on until:|
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.