📖 Step 2: Design - UI/UX Basics#52 / 291
Padding / Margin
Padding / Margin
📖One-line summary
Inner spacing (padding) and outer spacing (margin).
✨Example
CSS box model: margin / border / padding / content
margin
border
padding
Content
⚡Vibe coding prompt examples
>_
Build a consistent spacing system. Define a 4px-based spacing scale as CSS variables and generate utility classes.
>_
Make card component padding/margin responsive. Mobile 16px, tablet 24px, desktop 32px.
>_
The existing project's margin/padding values are inconsistent. Build a refactor plan that unifies them on Tailwind spacing.
Try these prompts in your AI coding assistant!