Box Model: Margin, Padding, Border

easy

By FrontendAtlas Team · 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.

Guides

Shipping Code Under PressureBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use the relevant interview-question hub, then move into a concrete study plan before targeted company sets.

Browse CSS interview questions Open frontend interview questions hub Open 7-day crash study plan Browse company questions

<html> HTML

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

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  background: #fafafa;
  line-height: 1.6;
}
/* TODOs:
  1) Give each .card padding (inner space around text).
  2) Add a border and rounded corners to each card.
  3) Add vertical spacing (margin-bottom) between the cards.
*/

Live preview updates as you type

Building preview…