tailwindcss/docs/source/spacing.md

extends	title
_layouts.master	Spacing

Spacing

The syntax below is combined to create a system for padding and margins. For example, .pt-2 would add padding to the top of the element to the value of 0.5rem and .mx-0 would make the horizontal margin zero.

Class

p Padding

m Margin

pull Negative Margin

Position (optional)

t Top

r Right

b Bottom

l Left

x Horizontal

y Vertical

Space

0 0

1 0.25rem

2 0.5rem

3 0.75rem

4 1rem

6 1.5rem

8 2rem

Responsive

The spacing utitlies can also be used with responsive prefixes:

<!-- Using the utilities in HTML: -->

<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>

// Using the utilities in Less:

div {
  .screen(lg, {
    .mt-6;
  });
}