Container, Spacing (Padding, Margin) in Tailwind CSS

1. The container Class

The container class centers your content and applies responsive max-widths:

<div class="container mx-auto px-4">
    <p>This content is centered and padded.</p>
</div>
            

mx-auto centers the container horizontally. px-4 adds horizontal padding.

2. Margin Utilities

Use m-, mt-, mb-, ml-, mr-, and mx-/my- for margin control:

<div class="mt-6 mb-4">Top and bottom margins</div>
<div class="mx-2">Horizontal margin (left + right)</div>
<div class="m-0">No margin</div>
            

3. Padding Utilities

Use p-, pt-, pb-, pl-, pr-, and px-/py- for padding:

<div class="p-4">Uniform padding</div>
<div class="pt-8 pb-2">Top and bottom padding</div>
<div class="px-6">Left and right padding</div>
            

4. Responsive Spacing

You can apply different spacing values for each breakpoint:

<div class="p-2 md:p-6 lg:p-10">Responsive padding changes with screen size</div>
            

5. Negative Margin

Use -m- classes to pull elements closer together:

<div class="-mt-4">Moves element up by 1rem (mt-4 in reverse)</div>
            

Conclusion

Mastering Tailwind’s spacing system allows you to build pixel-perfect layouts with minimal custom CSS. Padding and margin utilities are consistent, predictable, and responsive.