Give Content Breathing Room

Padding (internal margins) is what turns " stuck " text into professional design.

Writing Order (Clockwise)

If you write 4 values, they go in order: Top → Right → Bottom → Left.

padding: 10px 20px 30px 40px;

Remember this as clockwise movement starting from 12 o'clock.

Role in UX (User Experience)

If you have a small X icon, it's hard to press with a finger on a smartphone.

Shorthand Notations:

• padding: 20px: all sides.
• padding: 10px 40px: 10 (top/bottom), 40 (left/right).
• padding: 10px 20px 30px: 10 (top), 20 (right/left), 30 (bottom).