HTML CSS Bootstrap JavaScript jQuery MySQL PHP Data Mining

CSS Box Model

Written by RedoHub Team · Last updated: July 31, 2026

All HTML elements can be considered as 'boxes'. In CSS, the term "Box Model" is used when talking about design and layout. It consists of four distinct levels: Margins, Borders, Padding, and the Content area.

Levels of the Box Model

Imagine your element is a framed picture. Each layer of the box model serves a specific purpose:

  • Content: The actual text or image (the photo).
  • Padding: Space around the content (interior empty space).
  • Border: A line that goes around the padding and content (the frame).
  • Margin: Space outside the border (distance between the frame and other walls).
This is the CONTENT area.

Surrounded by Padding, Border, and Margin.

Calculating Total Box Width

By default, when you set the width of an element, it only applies to the content area. To get the total width of the element, you must add the padding and borders on both sides.

Formula: Total Width = [Width] + [Left Padding] + [Right Padding] + [Left Border] + [Right Border] 
div {
    width: 300px;
    padding: 10px;
    border: 5px solid gray;
    margin: 20px;
}

/* Total width = 300 + 10(L) + 10(R) + 5(L) + 5(R) = 330px */

The box-sizing Solution

To keep the total width exactly what you specified, you can use box-sizing: border-box;. This automatically shrinks the content area to accommodate any padding or borders.

* {
    box-sizing: border-box; /* Modern standard */
}

div {
    width: 300px;
    padding: 10px;
    border: 5px solid gray;
}

/* Total width remains 300px */
Tip: Always include box-sizing: border-box; in your universal selector (*) for easy responsive layouts.

Common Mistakes to Avoid

Forgetting that width excludes padding/border by default. The default box-sizing: content-box means your set width only covers the content area — padding and border add extra size on top, which can push layouts wider than expected.
Not applying border-box project-wide. Setting it per-element instead of once on * leads to inconsistent sizing behavior across a codebase as it grows.
Thinking margin is part of the "box." Margin sits outside the border and isn't counted in an element's rendered width/height — it only affects the space between boxes, not the box itself.

Try It: Building a Box Layer by Layer

Watch the box grow as each layer is added — content, then padding, then border, then margin:

margin (transparent space, shown here as yellow for visibility)
padding
content

Margin (outermost, transparent), border (the green frame), padding (light green), content (innermost, white) — exactly the four layers described above, visualized together.

Frequently Asked Questions

Q: Does margin count toward an element's width?

A: No — margin is outside the box entirely. Only content, padding, and border contribute to an element's own width/height.

Q: What's the default box-sizing value?

A: content-box — width/height apply to the content area only, unless you override it with border-box.

Q: How do I check an element's total rendered size in DevTools?

A: In Chrome/Firefox DevTools, the Elements/Inspector panel's "Computed" or "Layout" tab shows a live box-model diagram with all four layers' exact pixel values. See the MDN box model guide for more.

« Previous Lesson Next Lesson »