Box Model: Margin, Padding, Border

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Build a card layout that clearly demonstrates the CSS box model. Use padding to add internal breathing room, a border to visualize the box edge, and margins to separate multiple cards. The intent is to make each layer of the box model visible and easy to explain.

Solution

Overview

This task is about showing the four box layers in action: content, padding, border, and margin. A strong solution sets explicit padding for internal spacing, a visible border for boundaries, and margin to space cards apart, making it obvious how each layer affects layout and sizing.

Approach — Apply Padding, Border, and Margin

Give each .card a fixed or max width, a padding value (e.g. 16px), a subtle border (e.g. 1px solid #ccc), and a margin to separate adjacent cards. Add a small border-radius for readability. The goal is visual clarity: you should be able to point at the padding, border, and margin in the rendered result.

<html>

<div class='card'>
  Card 1
</div>
<div class='card'>
  Card 2
</div>
<div class='card'>
  Card 3
</div>

# CSS

.card {
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
}

Notes & Pitfalls

Pitfalls

Forgetting that padding affects box size unless box-sizing is set to border-box.
Using only margin or padding for spacing makes it unclear which side creates the space.

Techniques

Use padding for internal spacing, margin for separation between elements.
Add a border to make box boundaries visible when debugging layout issues.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep