Spacing, margin and padding

Spacing scale

Tailwind uses a consistent spacing system for utilities such as p-4, px-6, mt-8, gap-4 and many others. Consistent spacing makes interfaces feel intentional.

Margin versus padding

Padding creates space inside an element's box. Margin creates space outside it. Flex and grid layouts often use gap for spacing between children instead of manually adding margins.

Do not solve every spacing problem with arbitrary values

Use the standard scale when it expresses the design. Arbitrary values are valuable for genuinely special cases, but excessive one-off values make a design system harder to maintain.