DEV Community

Cover image for Tailwind CSS for Dummies: Margins and Paddings
Eric The Coder
Eric The Coder

Posted on

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:
Alt Text

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

blank example
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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

border 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>
Enter fullscreen mode Exit fullscreen mode

Alt Text 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

Discussion (0)