Consistent Spacing Examples

Using Margin (m-*) and Padding (p-*)

These elements use consistent margins and padding from Tailwind's scale.

Padded Box 1 (p-4)
Padded Box 2 (p-6)
Box with Margin (m-4) and Padding (p-4)
Box with Margin (m-2) and Padding (p-4)

Using Space Between (space-x-* / space-y-*)

The `space-x-4` class adds horizontal margin to all direct children except the first.

Item 1
Item 2
Item 3

The `space-y-2` class adds vertical margin to all direct children except the first.

Vertical Item A
Vertical Item B
Vertical Item C

Using Gap (gap-*) in Flex/Grid

The `gap-4` class adds spacing between grid or flex items.

Grid Cell 1
Grid Cell 2
Grid Cell 3
Grid Cell 4
Grid Cell 5
Grid Cell 6