GDB Solution — Layout Spacing Method
Front-End Development — Spring 2026
📅 Spring 2026
💻 GDB
✅ 100% Correct
🆓 Free
CSS GDB
Topic
Option B
Selected Answer
100 Words
Max Limit
Free
Download
Question
Which approach would you choose for managing spacing in an e-commerce product listing grid layout?
A
Use margin-based spacing — external spacing between elements
B
Use padding-based spacing — internal spacing within each card
Selected Option
✅ B – Padding-based spacing
Justification
Padding is ideal for internal card spacing because it stays inside the element's boundaries, ensuring backgrounds and borders display consistently. When paired with
box-sizing: border-box, it provides predictable sizing and better cross-browser consistency. For spacing between cards, CSS Grid's gap property offers a cleaner and more reliable approach than margins, avoiding issues like margin collapse. This clear separation — padding for internal spacing and gap for layout spacing — improves maintainability, responsiveness, and overall scalability, making the design system more structured and dependable.
