InnoMarts logo
InnoMarts
Fast websites
← Back to course

The Box Model

The Box Model

Welcome back.

In the previous lesson, you learned how to style text with colors, fonts, sizes, and spacing.

Now we meet one of the most important ideas in CSS:

The box model.

Every element on a web page is treated like a box.

Headings?

Box.

Paragraphs?

Box.

Images?

Box.

Buttons?

Box.

That innocent little div?

Definitely a box.

CSS looks at your page and sees boxes everywhere.

Like a warehouse manager with design opinions.

What You’ll Learn

In this lesson, you’ll learn:

What Is the Box Model?

The CSS box model describes how space works around every element.

Each box has four main parts:

You can imagine it like this:

margin
  border
    padding
      content

The content is the actual text, image, or element content.

Padding is the space inside the element.

Border is the line around the element.

Margin is the space outside the element.

Simple idea.

Huge impact.

Like discovering that your layout problems were not magic.

They were boxes.

Boxes all along.

Create the Project

Create a folder for this lesson:

mkdir css-lesson4
cd css-lesson4
touch index.html
touch style.css

You should have:

css-lesson4/
  index.html
  style.css

Open the folder in your editor.

We will build a small page with cards.

Cards are perfect for learning the box model.

Because cards use padding, margin, border, width, and sometimes emotional support.

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The CSS Box Model</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>The CSS Box Model</h1>
    <p>Every element is a box. Yes, even that one.</p>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>What Is the Box Model?</h2>
      <p>
        The box model explains how CSS calculates the size and spacing of elements.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Content</h2>
        <p>The actual text, image, or content inside the element.</p>
      </article>

      <article class="card">
        <h2>Padding</h2>
        <p>The space between the content and the border.</p>
      </article>

      <article class="card">
        <h2>Border</h2>
        <p>The line around the padding and content.</p>
      </article>

      <article class="card">
        <h2>Margin</h2>
        <p>The space outside the element.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Created while learning the CSS box model.</p>
  </footer>
</body>
</html>

This gives us:

Now we can style the boxes.

And yes, we will finally understand why one margin can ruin your morning.

Start with Basic Styles

Open style.css and add:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

This creates a basic page layout.

Notice:

margin: 40px auto;

This centers the .page container horizontally.

The 40px adds vertical space.

The auto handles left and right spacing.

CSS says:

“Let me calculate the sides.”

And for once, CSS is helpful.

Content

The content is the inside part of the element.

For example:

<article class="card">
  <h2>Content</h2>
  <p>The actual text, image, or content inside the element.</p>
</article>

The text inside the card is the content.

In CSS, width and height usually describe the size of the content area.

Example:

.card {
  width: 300px;
}

This means the content area is 300px wide.

But there is a small problem.

Padding and border can increase the final visible size.

Because CSS likes surprises.

Not always good surprises.

Padding

Padding is the space inside the element.

It creates breathing room between the content and the border.

Add this:

.card {
  background-color: white;
  padding: 24px;
}

Now the content is not touching the edges.

Much better.

Without padding, text sits too close to the border.

Like someone standing too close while explaining JavaScript closures.

Padding makes everything more comfortable.

You can set padding on all sides:

padding: 24px;

Or separately:

padding-top: 20px;
padding-right: 24px;
padding-bottom: 20px;
padding-left: 24px;

You can also use shorthand:

padding: 20px 24px;

This means:

Very useful.

Very common.

Border

Border is the line around the element.

Add this:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
}

The border has three parts:

border: width style color;

Example:

border: 2px solid #e5e7eb;

This means:

You can create different border styles:

border: 2px solid #2563eb;
border: 2px dashed #f97316;
border: 2px dotted #16a34a;

Borders are useful for separating content.

But do not add borders everywhere.

Too many borders make a page look like a spreadsheet had a nervous breakdown.

Border Radius

The border-radius property rounds corners.

Add:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Now the cards look softer.

Less sharp.

Less like an official document from 2004.

You can use small or large values:

border-radius: 8px;
border-radius: 16px;
border-radius: 999px;

999px is often used for pill-shaped buttons.

The button becomes round and friendly.

Like it wants to be clicked politely.

Margin

Margin is the space outside the element.

Add this:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  margin-bottom: 20px;
}

Now there is space between cards.

Margin separates elements from each other.

Padding creates internal comfort.

Margin creates external distance.

Important difference.

Padding says:

“Give my content space inside me.”

Margin says:

“Give me space from everyone else.”

Both are necessary.

Very human, actually.

Width and Height

You can control element size with width and height.

Example:

.card {
  width: 300px;
}

But be careful with fixed widths.

Fixed widths can cause problems on small screens.

Instead, this is often better:

.card {
  max-width: 300px;
}

Or for page containers:

.page {
  max-width: 900px;
}

max-width means:

Do not become wider than this, but you may be smaller if needed.

This is useful for responsive design.

The browser gets room to breathe.

And your layout does not explode on phones.

Always a good thing.

The Box-Sizing Problem

By default, CSS uses:

box-sizing: content-box;

That means:

Example:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

The final visible width becomes:

300px content
+ 40px padding
+ 4px border
= 344px total width

This surprises many beginners.

And some experienced developers.

And probably one person in a basement still debugging a layout from 2016.

Use border-box

Most modern CSS projects use this:

* {
  box-sizing: border-box;
}

Add it at the top of your CSS:

* {
  box-sizing: border-box;
}

Now width includes:

This makes sizing easier.

If you say:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

The final visible width stays 300px.

Much more predictable.

CSS becomes slightly less chaotic.

We appreciate this rare moment.

Style the Cards Layout

Add this:

.cards {
  display: grid;
  gap: 20px;
}

Do not worry too much about Grid yet.

We will study it later.

For now, just know:

gap: 20px;

creates space between cards.

This is often cleaner than using many margins.

Now update the card style:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Since .cards uses gap, we do not need margin-bottom on each card.

Cleaner.

More organized.

Less CSS spaghetti.

Style the Intro Card

Add:

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

This intro card uses:

That is the box model in action.

Not theory.

Real layout.

The box has entered the building.

Complete CSS

Your style.css should look like this:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  gap: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

.card h2 {
  margin-top: 0;
}

.card p,
.intro-card p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.site-footer {
  text-align: center;
  padding: 24px;
  color: #6b7280;
}

Save the file.

Refresh the browser.

Now you should see clean spacing and card structure.

This is the box model working.

Quietly.

Behind the scenes.

Like a stage crew dressed as CSS properties.

Common Mistakes

Confusing margin and padding

Padding is inside.

Margin is outside.

Example:

.card {
  padding: 24px;
  margin-bottom: 20px;
}

padding gives space inside the card.

margin-bottom gives space after the card.

If text is too close to the card edge, use padding.

If cards are too close to each other, use margin or gap.

Simple.

But easy to mix up.

CSS enjoys testing your concentration.

Forgetting box-sizing

Without this:

* {
  box-sizing: border-box;
}

Widths can become surprising.

Use border-box in most projects.

It makes layouts easier to understand.

Your future self will thank you.

Maybe even with coffee.

Adding too much margin everywhere

Bad:

h1 {
  margin: 50px;
}

p {
  margin: 50px;
}

.card {
  margin: 50px;
}

Too much margin everywhere creates chaos.

Use spacing intentionally.

Not like throwing pillows into a room with your eyes closed.

Practice

Create a page with:

Style each card with:

Use:

box-sizing: border-box;

at the top of your CSS.

Then experiment with:

Observe how the layout changes.

CSS becomes less scary when you watch what each property does.

Mini Challenge

Create three pricing cards:

Each card should have:

Use the box model to style them:

Make the Premium card stand out with a different border color.

Not too much.

Just enough to say:

“I am special.”

Not:

“I escaped from a carnival poster.”

Summary

Today you learned:

The box model is everywhere.

If you understand it, CSS becomes much easier.

If you ignore it, your layouts will behave like rebellious furniture.

And we already have enough rebellious furniture in life.

Next Lesson

In the next lesson, we will learn Flexbox.

Flexbox helps align and organize elements in one direction.

Rows.

Columns.

Centered things.

Finally, CSS will help us place items without summoning ancient spirits.