Tailwind css tutorial Hindi #6 Mastering Margin and Padding

All about Margin and Padding.?

1. How to apply margin and padding on all sides
2. Margin/padding on all sides
3. Use m- for margin and p- for padding.
4. Examples:
5. Margin on all sides:
6. m-4 → margin on top, right, bottom, left.
7. Padding on all sides:
8. p-4 → padding on top, right, bottom, left.
9. You just change the number for more or less space: 0, 0.5, 1, 1.5, 2, 3, 4, 5, ... etc.

•How to apply margin and padding on vertical and Horizontal Side.

Vertical and horizontal sides

• Vertical (top + bottom):

• Margin: my-4

• Padding: py-4

• Horizontal (left + right):

• Margin: mx-4

• Padding: px-4

Think:

• y → up–down

• x → left–right

•How to apply margin and padding on single side

Single side (top, right, bottom, left)

Margin:

1. Top: mt-4
2. Right: mr-4
3. Bottom: mb-4
4. Left: ml-4

Padding:

1. Top: pt-4
2. Right: pr-4
3. Bottom: pb-4
4. Left: pl-4

Pattern is same: first letter m or p, then side letter, then value.

•Apply margin and padding on span

<span> is inline by default, but Tailwind utilities still work.

Example:

<span class="m-2 p-2 bg-yellow-200">Text</span>

If you want it to behave more like a box (for layout), you can also add inline-block or block:

<span class="inline-block m-2 p-2 bg-yellow-200">Text</span>

• Interview questions.

How to apply 1 px margin and padding

margin and padding different in tailwind 3 and 4 version