tailwindcss/docs/source/padding.blade.md

extends	title
_layouts.markdown	Padding

Padding

Usage Responsive Customizing

Using

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

Customizing the spacing scale

You can customize the margin and padding utilities using the @sizing-scale variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.

// Scale customization here

Responsive spacing utilities

The spacing utilities can also be used with responsive prefixes:

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

// Responsive example here