Tailwind Padding and Margin

Margin utility classes in Tailwind CSS

In order to create space around the HTML element’s defined borders, we use the CSS margin property.

Tailwind CSS has utility classes for controlling the margin for elements.

A few Tailwind margin classes

Using these classes adds the margin in elements:

m-0 = margin: 0px;

mx-0 =  margin-left: 0px; margin-right: 0px;

my-0      margin-top: 0px; margin-bottom: 0px;

m-px     margin: 1px;

me-px   margin-inline-end: 1px;

m-1        margin: 0.25rem; /* 4px */

my-2      margin-top: 0.5rem; /* 8px */

margin-bottom: 0.5rem; /* 8px */

Tailwind has a big list of pre-defined utility classes for margin that you can see here.

Tip: In order to remember margin/padding classes and meaning in Tailwind, the margin classes starts with m while padding with p letter. The second letter:

t = top e.g. mt-2

b = bottom e.g. pb-5 and so on.

l = left e.g. ml-5

r = Right e.g. pr-8

x = Left and Right e.g. mx-2 (adds margin in left and right)

y = Top and Bottom e.g. py-5 (Adds 5px padding in top and bottom)

Padding utility classes in Tailwind CSS

Similarly, Tailwind has classes for padding in the HTML elements. CSS padding properly adds spacing between the content and border of HTML elements.

First, have a look at a few utility classes of padding in Tailwind and then we will show how padding and margin utilities work in different HTML elements.

p-0         padding: 0px;

px-px    padding-left: 1px;

padding-right: 1px;

 

pr-px     padding-right: 1px;

p-0.5      padding: 0.125rem; /* 2px */

pb-0.5   padding-bottom: 0.125rem; /* 2px */

ps-1       padding-inline-start: 0.25rem; /* 4px */

pl-1.5     padding-left: 0.375rem; /* 6px */

pr-2        padding-right: 0.5rem; /* 8px */

See the complete padding utility classes list here.

In this following section, we will show examples of using these margin and padding classes with various elements.

An example using Tailwind padding classes

In the first example of Tailwind utility classes for padding, we will show you three boxes with and without Tailwind padding.

The image shows three boxes without padding below:

tailwind-padding-no

Then we applied various padding utilizes and you can see the difference in the content space of the first and second image.

tailwind-padding

<!DOCTYPE html>

<html>

<head>

<script src="https://cdn.tailwindcss.com"></script>




    <style>

.box {

   

    border:solid 1px;

    height:150px;

    width:25%

}




</style>        

</head>




<body class="text-center mx-4 space-y-2">




<div class="flex flex-1 flex-wrap justify-between gap-2 dark:text-neutral-800">




<div class="pt-2 box">Padding = pt-2</div>

<div class="pt-10 box">Padding = pt-10</div>

<div class="pt-20 mt-8 box">Padding = pt-20</div>

</div>


</body>
</html>

Note: we just added padding utilities as compared to images without padding in above code.

The example of margin utilities

For showing the margin utility class’s demo, again we have three boxes. With margin utility classes, the gap between the box should vary as compared to without using margin.

Also, the content is at the same place from the box’s borders as we have not used padding classes.

Code:

<!DOCTYPE html>

<html>

<head>

<script src="https://cdn.tailwindcss.com"></script>

<style>

.box {

   

    border:solid 1px;

    height:150px;

    width:25%

}

</style>        

</head>

<body class="text-center mx-4 space-y-2">


<div class="flex flex-1 flex-wrap justify-between gap-2 dark:text-neutral-800">


<div class="mt-2 box">Margin = mt-2</div>

<div class="mt-10 box">Margin = mt-10</div>

<div class="mt-20 box">Margin = mt-20</div>

</div>


</body>

</html>

Output:

tailwind-margin

A demo of using Tailwind margin/padding classes in form elements

For this example, we have an HTML form with CSS style.

To increase the spacing between Form elements and within its contents (textboxes, labels, and button), we used margin and padding utilities (along with other classes) as shown in the example below:

Code:

<!DOCTYPE html>

<html>

<head>

<script src="https://cdn.tailwindcss.com"></script>

</head>


<body class="text-center mx-4 space-y-2">

<div class="w-full max-w-xs">

  <form class="bg-blue px-8 pt-4 pb-4 mb-8 shadow-lg shadow-cyan-500/50 rounded">

    <div class="mb-8">

      <label class="block text-red-600 text-lg font-bold mb-4" for="uname">

        Enter Username

      </label>

      <input class="shadow-md  border w-full py-2 px-3 text-gray-500  focus:outline-none focus:shadow-outline round" id="uname" type="text" placeholder="Username Here">

    </div>

    <div class="mb-6">

      <label class="block text-red-600 text-lg font-bold mb-4" for="password">

        Enter Password

      </label>

      <input class="shadow-md border border-red-500 w-full py-2 px-3 text-gray-700 mb-3 focus:outline-none focus:shadow-outline round" id="password" type="password" placeholder="**********">

    </div>

    <div class="flex items-center justify-between">

      <button class="bg-green-600 hover:bg-green-800 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline" type="button">

        Log In

      </button>

    </div>

  </form>

</div>

</body>

</html>

Output:

tailwind-mar-pad-form

Notice the <form> tag where px-8, pt-4, pb-4 classes are used for padding and mb-8 for the margin  – along with other classes.

Similarly, in the <label>, <input>, and <button> tags, the padding and margin classes are used.

Using padding in the table example

The demo below adds padding unities to the table header and table data for increasing space between the text and borders.

In the first image, the table is without padding and uses just a few border classes. Also, the margin is added at the first div level:

tailwind-pad-table-no

In the example below, we added px-8, px-6, and px-4 padding utility classes in the header and table data. It adds spacing of 8px, 6px, and 4px from left and right.

Code:

<!DOCTYPE html>

<html>

<head>

<script src="https://cdn.tailwindcss.com"></script>

</head>


<body>

<div class="flex flex-5 mx-8 mt-10  justify-between gap-2">

<table class="border-collapse border border-slate-400 ">

  <thead>

    <tr>

      <th class="border border-slate-300 px-8">Name</th>

      <th class="border border-slate-300 px-8">Age</th>

      <th class="border border-slate-300 px-8">Salary</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="border border-slate-300 px-8">Jim</td>

      <td class="border border-slate-300 px-8">35</td>

      <td class="border border-slate-300 px-8">$5000.00</td>

    </tr>

    <tr>

      <td class="border border-slate-300 px-6">Anna</td>

      <td class="border border-slate-300 px-6">24</td>

      <td class="border border-slate-300 px-6">$3500.00</td>

    </tr>

    <tr>

      <td class="border border-slate-300 px-4">Adams</td>

      <td class="border border-slate-300 px-4">31</td>

      <td class="border border-slate-300 px-4">$4000.00</td>

    </tr>

  </tbody>

</table>


</div>

</div>

</body>


</html>

Output:

tailwind-padding-table