Tailwind CSS for Dummies: Margins and Paddings

Follow me on Twitter: Follow @justericchapman

Spacing

Tailwind spacing utilities allow to specified space between elements. The space could be outside an element border (margin) or inside an element border (padding).

Look at the box the see the difference between margins and paddings:

Margins

To set a margin all around the element (on all side), we need to use the margin utilities. The syntax is m-{number} The specified number is not a measurement unit. It only a Tailwind CSS number that reference a margin space. The bigger the number, the bigger the space. Here are some example:

<div class="m-0">  margin: 0px;
<div class="m-1">  margin: 0.25rem;
<div class="m-4">  margin: 1rem; 
<div class="m-96"> margin: 24rem;

If we only want a margin for one side. We need to specify the side the margin will apply (top, right, bottom, left).

The syntax is m{side}-{number} Side can be replace with t (top), r (right), b (bottom), l (left)

Here are some example:

<div class="mt-10"> margin-top: 0px;
<div class="ml-1">  margin-left: 0.25rem;
<div class="mb-4">  margin-bottom: 1rem; 
<div class="mr-96"> margin-right: 24rem;

Let's do an example to see by our self:

<h1>Welcome to this page</h1>
<p>In this page we will learn Tailwind CSS spacing utilities</p>

Note, using Tailwind our HTML tag as no default attributes. The h1 text look the same as p text and there is no spacing at all.

Let's add our first Tailwind margin utility:

<h1 class="mt-10 ml-10">Welcome to this page</h1>
<p class="mt-5 ml-10">In this page we will learn Tailwind CSS spacing utilities</p>

Margin x and y

Tailwind allow to modify both x-axis margin and y-axis margin with one short syntax: m{axis}-10

For example to change left, right and top, bottom:

<div class="ml-10 mr-10">
<div class="mt-10 mb-10">
same as
<div class="mx-10">
<div class="my-10">

Paddings

Paddings utilities work the exact same way, with same syntax as margins. Just replace the m{side}-{number} with a p{side}-{number}

Remember padding is the space inside element border. Here a example. For clarity purpose we will display a border to our html elements:

<h1 class="border-2 mt-10 ml-10">Welcome to this page</h1>
<p class="border-2 mt-5 ml-10">In this page we will learn Tailwind CSS spacing utilities</p>

Note there is no space between element and is border.

Let's change that with paddings:

<h1 class="p-5 mt-10 ml-10 border-2">Welcome to this page</h1>
<p class="p-5 mt-5 ml-10 border-2">In this page we will learn Tailwind CSS spacing utilities</p>

Much better :-)

Conclusion

That's it for today. Tomorrow the journey continue! Stay tune and follow-me to miss nothing.

You can follow me on Twitter: Follow @justericchapman