The CSS Box Model Explained

If you’ve ever wondered why elements on a web page don’t line up the way you expect, the answer is usually: the CSS box model.

In this article, you’ll learn what the box model is, how it affects layout, and how to control it with simple CSS. We’ll walk through step-by-step examples you can copy, paste, and tweak—no prior coding experience needed.

What is the CSS Box Model?

Every element on a web page (like a paragraph, image, or button) is treated as a box. The CSS box model describes what’s inside that box and how big it is.

Each box has four main parts, from the inside out:

Content – The actual stuff (text, image, etc.)
Padding – Space inside the box around the content
Border – A line that wraps around the padding and content
Margin – Space outside the border, separating this box from others

A simple way to picture it is like a framed photo:

The photo is the content
The white space around the photo is the padding
The frame is the border
The space between your frame and other frames on the wall is the margin

Understanding this lets you control spacing with confidence instead of guessing.

Setting Up a Simple HTML Page

First, let’s create a very basic page so we can practice.

Create a new file called box-model.html and paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>CSS Box Model Demo</title>
  <style>
    /* We'll add styles here soon */
  </style>
</head>
<body>
  <div class="box">Hello, box model!</div>
</body>
</html>

Save the file and open it in your browser (Chrome, Firefox, Edge, etc.) by double-clicking it. You should see plain text: Hello, box model!

Now we’ll use CSS in the <style> section to see the box model in action.

Example 1: Visualizing the Box

Let’s make the box visible and give it some basic styling.

Add this CSS inside the <style> tag:

.box {
  background-color: lightblue;   /* Color behind the text */
  width: 200px;                  /* Box content width */
  height: 100px;                 /* Box content height */
  border: 2px solid blue;        /* Border around the box */
}

Your <style> section should now look like this:

<style>
  .box {
    background-color: lightblue;
    width: 200px;
    height: 100px;
    border: 2px solid blue;
  }
</style>

Refresh the page in your browser.

What you should see:

A light blue rectangle
A blue border around it
The text “Hello, box model!” inside

Right now, this box has no extra spacing inside or outside. The size you see is almost exactly the width and height you set (plus a tiny bit for the border).

Example 2: Adding Padding (Inner Space)

Padding is the space inside the box, between the content and the border.

Let’s add some padding so the text doesn’t touch the edges:

.box {
  background-color: lightblue;
  width: 200px;
  height: 100px;
  border: 2px solid blue;
  padding: 20px;                  /* Space inside the box */
}

Refresh the page.

What changed?

The box looks bigger.
The text moved inward, away from the border.

Here’s the important part: when you add padding: 20px;, the visual size of the box increases.

The total width is now:

Content width: 200px
Left padding: 20px
Right padding: 20px
Left border: 2px
Right border: 2px

Total width = 200 + 20 + 20 + 2 + 2 = 244px

This is why boxes sometimes don’t fit where you expect—they grow when you add padding and borders.

Try it yourself

Change padding: 20px; to padding: 40px; and refresh.
Then try padding: 10px 30px; (top/bottom 10px, left/right 30px) and see how the box changes.

Example 3: Adding Margin (Outer Space)

Margin is the space outside the border. It pushes other elements away.

Let’s add another box so you can see how margin works.

Update your HTML <body> to have two boxes:

<body>
  <div class="box">First box</div>
  <div class="box second">Second box</div>
</body>

Now update your CSS:

.box {
  background-color: lightblue;
  width: 200px;
  height: 100px;
  border: 2px solid blue;
  padding: 20px;
}

.second {
  background-color: lightgreen;  /* Different color for the second box */
  margin-top: 30px;              /* Space above the second box */
}

Refresh the page.

What you should see:

Two boxes, one light blue and one light green
A gap between them (that’s the margin-top on the green box)

Margins don’t change the size of the box itself. They only affect the space around it.

Try it yourself

Change margin-top: 30px; to margin: 30px; (this adds margin on all sides).
Try margin: 10px 50px; (top/bottom 10px, left/right 50px) and watch the box move horizontally.

Example 4: The `box-sizing` Property (A Common Gotcha)

One confusing part of the box model is that width and height only apply to the content by default. Padding and border are added on top, making the box bigger than you might expect.

CSS has a property called box-sizing that lets you change this behavior.

Add this to your CSS at the top of the <style> tag:

* {
  box-sizing: border-box;  /* Include padding and border inside width/height */
}

Now your full CSS might look like this:

* {
  box-sizing: border-box;
}

.box {
  background-color: lightblue;
  width: 200px;
  height: 100px;
  border: 2px solid blue;
  padding: 20px;
}

.second {
  background-color: lightgreen;
  margin-top: 30px;
}

Refresh the page again.

What changed?

The boxes look smaller than before.

Now, the total width is:

200px including content + padding + border

This makes layout much easier because when you say width: 200px;, you know that’s the full size of the box.

Most modern projects use box-sizing: border-box; for everything, just like we did with the * selector.

Try it yourself

Comment out the * { box-sizing: border-box; } rule by wrapping it in /* ... */ and refresh.
Compare the sizes of the boxes with and without box-sizing: border-box;.

Quick Reference: Box Model Properties

Here are the main properties you’ll use, with simple meanings:

width / height – Size of the content area
padding – Space inside the box, around the content
- padding-top, padding-right, padding-bottom, padding-left
border – Line around the padding and content
- border-width, border-style, border-color
margin – Space outside the border
- margin-top, margin-right, margin-bottom, margin-left
box-sizing – How width/height are calculated
- content-box (default): width = content only
- border-box: width = content + padding + border

Common Beginner Mistakes (And How to Fix Them)

1. “My boxes don’t fit in a row!”
You might be forgetting that padding and borders add to the total width. Use box-sizing: border-box; to make widths easier to control.

2. “Why is there extra space between my boxes?”
Check your margin values. Two vertical margins can sometimes combine (this is called margin collapsing). A quick fix is to reduce margins or use padding instead.

3. “My text is touching the edges of the box.”
Add some padding to give your content breathing room.

Practice Idea: Design a Simple Card

Try creating a simple “card” style element using what you’ve learned.

Add this inside <body>:

<div class="card">
  <h2>Welcome!</h2>
  <p>This is a simple card using the CSS box model.</p>
</div>

Then add this CSS:

.card {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 16px;
  margin: 20px;
  width: 250px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

You’ve just built a basic UI component many real websites use.

Recap and What’s Next

You’ve learned that every element on a web page is a box with:

Content in the middle
Padding inside the box
Border around it
Margin outside it

You also saw how:

padding and border can make boxes bigger than their width/height
margin controls space between elements
box-sizing: border-box; can make layouts more predictable

If this felt like a lot, that’s normal. The box model is a core concept, and understanding it is a big win.

Next steps:

Experiment with different padding, margin, and border values
Try creating a simple layout with 2–3 cards in a row
Look at your favorite websites and imagine how their boxes are structured

Keep practicing, keep tweaking values, and don’t worry if it feels confusing at first. With a bit of hands-on experimentation, the CSS box model will soon feel natural.

Mudzinga