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.

Margin Demo, Padding Demo, Both in a Form example, Padding in the Table example

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:

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

See online demo and code

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.

See online demo and code

Code:

Output:

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:

See online demo and code

Code:

Output:

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:

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

See online demo and code

Code:

Output: