Spacing
Control the padding and margin on one side of an element using the {p|m}{t|r|b|l}-{size} utilities.
For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and ml-2 would add 0.5rem of margin to the left of an element.
Examples
html
<!-- 1rem padding in all directions -->
<div class="p-4">...</div>
<!-- 1.5rem margin to top, 1rem margin to right -->
<Card class="mt-6 mr-4">...</Card>Table of permutations
| Type | Direction | Size | Example |
|---|---|---|---|
p (padding) | (all directions) | 0 (none) | p-0 |
p (padding) | x (left and right) | 0 (none) | px-0 |
p (padding) | y (top and bottom) | 0 (none) | py-0 |
p (padding) | t (top) | 0 (none) | pt-0 |
p (padding) | r (right) | 0 (none) | pr-0 |
p (padding) | l (left) | 0 (none) | pl-0 |
p (padding) | b (bottom) | 0 (none) | pb-0 |
p (padding) | (all directions) | px (1px) | p-px |
p (padding) | x (left and right) | px (1px) | px-px |
p (padding) | y (top and bottom) | px (1px) | py-px |
p (padding) | t (top) | px (1px) | pt-px |
p (padding) | r (right) | px (1px) | pr-px |
p (padding) | l (left) | px (1px) | pl-px |
p (padding) | b (bottom) | px (1px) | pb-px |
m (margin) | (all directions) | 0 (none) | m-0 |
m (margin) | x (left and right) | 0 (none) | mx-0 |
m (margin) | y (top and bottom) | 0 (none) | my-0 |
m (margin) | t (top) | 0 (none) | mt-0 |
m (margin) | r (right) | 0 (none) | mr-0 |
m (margin) | l (left) | 0 (none) | ml-0 |
m (margin) | b (bottom) | 0 (none) | mb-0 |
m (margin) | (all directions) | px (1px) | m-px |
m (margin) | x (left and right) | px (1px) | mx-px |
m (margin) | y (top and bottom) | px (1px) | my-px |
m (margin) | t (top) | px (1px) | mt-px |
m (margin) | r (right) | px (1px) | mr-px |
m (margin) | l (left) | px (1px) | ml-px |
m (margin) | b (bottom) | px (1px) | mb-px |
See all examples in Tailwindcss Padding and Tailwindcss Margin.