Mastering the CSS box model

Every HTML element is treated like a rectangular box.

Headings, paragraphs, buttons, images, and cards all follow this same idea. If you understand how these boxes work, spacing and layout become much easier to control.

The CSS box model explains how content, padding, borders, and margins fit together.

What the CSS box model is

The CSS box model is the set of rules that controls how an element is sized and spaced.

Think of a framed picture:

• The picture is the content.
• The space around the picture is the padding.
• The frame is the border.
• The empty wall space around the frame is the margin.

When a layout looks strange, the box model is often the first place to check.

Content area

The content area is the inside part of the box.

This is where text, images, or child elements live.

<p class="bio-text">Hello, my name is Alex.</p>

<style>
  .bio-text {
    width: 200px;
    background-color: yellow;
  }
</style>

The paragraph content is limited to 200px wide.

Use width when you want text or media to fit inside a specific space.

Be careful with fixed heights on text. If the text wraps onto more lines, it can overflow the box.

Padding

Padding is space inside the box.

It sits between the content and the border. The element's background shows through the padding by default.

<div class="alert-box">Warning: Save your work!</div>

<style>
  .alert-box {
    background-color: yellow;
    padding: 20px;
  }
</style>

The text now has breathing room inside the yellow box.

Use padding for buttons, cards, alerts, and any element where the content should not touch the edge.

You can set padding on one side with properties like padding-top, padding-right, padding-bottom, and padding-left.

Border

The border is the line around the padding and content.

You can control its width, style, and color.

<div class="avatar">A</div>

<style>
  .avatar {
    width: 64px;
    height: 64px;
    border: 4px solid black;
  }
</style>

The border frames the element.

Use borders to separate sections, outline cards, or create clear visual edges.

If the border width is 0, the border does not appear and takes up no layout space.

Margin

Margin is space outside the border.

It pushes other elements away. Margins are transparent, so you see the parent or page background through them.

<button class="primary-button">Submit</button>
<button>Cancel</button>

<style>
  .primary-button {
    margin-right: 15px;
  }
</style>

The first button pushes the second button away.

Use margins to create gaps between elements, such as paragraphs, buttons, cards, and sections.

Padding vs margin

Padding and margin both create space, but they do it in different places.

Padding creates space inside the element. Margin creates space outside the element.

<div class="box padded-box">I use padding.</div>
<div class="box margin-box">I use margin.</div>

<style>
  .box {
    background-color: lightblue;
    border: 2px solid darkblue;
  }

  .padded-box {
    padding: 30px;
  }

  .margin-box {
    margin-top: 30px;
  }
</style>

The padding makes the blue area larger. The margin creates a gap outside the second box.

Use padding when the inside of the element needs more space. Use margin when elements need more space between each other.

How total element size is calculated

By default, CSS uses content-box sizing.

That means width controls only the content area. Padding and borders are added on top.

<div class="sidebar">Menu</div>

<style>
  .sidebar {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    background-color: lightgray;
  }
</style>

The total visible width is:

200px content
+ 40px left and right padding
+ 10px left and right border
= 250px total

This explains why an element can look wider than the width you wrote.

Margins are outside the border. They are not part of the visible box size, but they still affect how much space the element occupies in the layout.

What box-sizing does

box-sizing changes how the browser calculates width and height.

It lets you decide whether padding and borders should be added outside the width or included inside it.

<input type="text" class="text-field" placeholder="Your name" />

<style>
  .text-field {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

The input stays inside its container even with padding.

box-sizing does not include margin. Margins always stay outside the box.

content-box vs border-box

content-box is the default. Padding and borders are added outside the width.

border-box includes padding and borders inside the width you set.

<div class="card content-box-card">content-box</div>
<div class="card border-box-card">border-box</div>

<style>
  .card {
    width: 300px;
    padding: 30px;
    border: 5px solid red;
    background-color: pink;
    margin-bottom: 20px;
  }

  .content-box-card {
    box-sizing: content-box;
  }

  .border-box-card {
    box-sizing: border-box;
  }
</style>

The content-box card becomes wider than 300px.

The border-box card stays exactly 300px wide.

Use border-box when you want width rules to be easier to predict.

Why many developers use box-sizing: border-box

border-box makes layout math simpler.

If you set an element to width: 50%, it can keep that width even after you add padding and borders.

Many projects add this rule near the top of the CSS file:

This makes sizing more predictable across the whole page.

Be careful when adding this to an old project. Existing layouts may have been built around the default content-box behavior.

Margin collapsing

Margin collapsing happens when vertical margins touch each other.

Instead of adding together, the browser uses the larger margin.

<h2 class="title">My title</h2>
<p class="text">My paragraph text.</p>

<style>
  .title {
    margin-bottom: 30px;
  }

  .text {
    margin-top: 10px;
  }
</style>

The gap between the heading and paragraph is 30px, not 40px.

Margin collapsing only affects vertical margins in normal document flow. Left and right margins do not collapse.

This behavior often helps text pages keep steady spacing between headings and paragraphs.

Common beginner mistakes

• Forgetting that browsers add default margins to elements like body, headings, and paragraphs.
• Using padding when you really want space between two separate elements.
• Using margin when you want the element's background color to grow.
• Forgetting that default content-box sizing adds padding and borders outside the width.
• Expecting horizontal margins to collapse. Only vertical margins can collapse.

Mini task

Look at this CSS rule:

What total visible width will this box take up on the screen?

Answer: 520px.

That is 400px content width, plus 50px left padding, 50px right padding, 10px left border, and 10px right border.

Short quiz

Question 1: Which layer is transparent and lets the background behind the element show through: padding or margin?

Answer: Margin.

Question 2: If two paragraphs are stacked vertically and both touching margins are 20px, what is the gap between them?

Answer: 20px, because vertical margins collapse.

Question 3: Which box-sizing value includes padding and borders inside the width you set?

Answer: border-box.

Small challenge

Try styling this profile card and text spacing:

• Give .card a width of 250px, a solid border, padding, and box-sizing: border-box.
• Give .first-paragraph a bottom margin of 40px.
• Give .second-paragraph a top margin of 20px.
• Notice that the gap between the paragraphs is 40px, not 60px.

<div class="card">
  <h3>User profile</h3>
  <p class="first-paragraph">Basic profile information.</p>
  <p class="second-paragraph">More details below.</p>
</div>

<style>
  .card {
    /* Add width, border, padding, and border-box sizing */
  }

  .first-paragraph {
    /* Add a bottom margin of 40px */
  }

  .second-paragraph {
    /* Add a top margin of 20px */
  }
</style>

One possible answer:

Summary

• The CSS box model surrounds every element with content, padding, border, and margin.
• Content is where text, images, and child elements live.
• Padding creates space inside the box.
• Borders frame the box outside the padding.
• Margins create transparent space outside the border.
• The default content-box model adds padding and borders outside the set width.
• box-sizing: border-box includes padding and borders inside the set width.
• Vertical margins can collapse into one larger margin instead of adding together.