Margin and padding utilities

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Margin and padding utilities—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Margin and padding utilities in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Margin and padding utilities in your own words.

p-* and m-* control inner and outer space. Tailwind adds axis and corner shortcuts:

px-4 — horizontal padding
py-2 — vertical padding
mt-6, mb-4 — single-side margin
mx-auto — center block elements with a width
-mt-2 — negative margin for optical overlap

Margin collapse between block siblings still applies—utilities do not change CSS physics. See CSS box model if margins behave unexpectedly.

Self-check

Which utility centers a block with a set width?
When might negative margin be appropriate?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

When do you reach for margin vs gap in flex/grid?
What collapse issues did you notice?

No discussion yet. Be the first to ask a question.

Margin and padding utilities

This lesson

Self-check

Interview tip Lesson completion confidence

Playground

Check yourself

Discussion