CSS Box Model

The CSS Box Model is one of the most fundamental concepts in CSS layout. Every HTML element on a page is treated as a rectangular box. The Box Model describes the four layers that make up this box and how they interact with each other.

Understanding the Box Model is essential for controlling the size, spacing, and positioning of every element on a web page.

The Four Layers of the Box Model

From the inside out, the four layers are:

1. Content – The actual content of the element (text, image, etc.).
2. Padding – Space between the content and the border.
3. Border – A line that wraps around the padding and content.
4. Margin – Space outside the border, separating this element from others.

Box Model Diagram

+-------------------------------------+
|              MARGIN                 |
|  +-------------------------------+  |
|  |          BORDER               |  |
|  |  +-------------------------+  |  |
|  |  |        PADDING          |  |  |
|  |  |  +-------------------+  |  |  |
|  |  |  |     CONTENT       |  |  |  |
|  |  |  +-------------------+  |  |  |
|  |  +-------------------------+  |  |
|  +-------------------------------+  |
+-------------------------------------+

Box Model in CSS

div {
    width: 200px;       /* Content width */
    height: 100px;      /* Content height */
    padding: 20px;      /* Space inside the border */
    border: 3px solid black;  /* The border line */
    margin: 30px;       /* Space outside the border */
}

Calculating the Total Width

By default, the browser uses the standard box model (content-box). In this model, padding and border are added on top of the specified width.

div {
    width: 200px;
    padding: 20px;   /* adds 20px left + 20px right = 40px */
    border: 5px solid;  /* adds 5px left + 5px right = 10px */
    margin: 10px;    /* does NOT add to visual size */
}

/* Total visual width = 200 + 40 + 10 = 250px */
/* Total space taken = 250px + 10px left margin + 10px right margin = 270px */

This default behavior can cause layout problems when working with percentage widths or grid systems, because adding padding or border makes elements wider than intended.

box-sizing: border-box

The box-sizing: border-box property changes how the total width is calculated. Instead of adding padding and border on top of the width, they are included within the width.

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Total visual width = exactly 200px */
    /* Padding and border cut into the content area, not beyond it */
}

Without border-box vs With border-box

/* Default (content-box) */
.box-a {
    width: 200px;
    padding: 20px;
    border: 5px solid red;
    /* Visual width = 200 + 40 + 10 = 250px */
}

/* With border-box */
.box-b {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid blue;
    /* Visual width = exactly 200px */
}

Global border-box Reset (Best Practice)

Most modern CSS projects apply border-box to every element globally. This makes sizing predictable and eliminates many common layout bugs.

*, *::before, *::after {
    box-sizing: border-box;
}

Adding this at the top of a stylesheet is considered industry standard in modern web development.

Inspecting the Box Model

In any modern browser (Chrome, Firefox, Edge), right-clicking on an element and selecting "Inspect" opens DevTools. The "Styles" panel shows a visual Box Model diagram at the bottom, displaying the exact margin, border, padding, and content sizes of the selected element. This is an invaluable tool for debugging layout issues.

Complete Example

/* Global reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.card {
    width: 320px;
    padding: 24px;
    border: 1px solid #e0e0e0;
    margin: 20px;
    background-color: #fff;
    border-radius: 8px;
    /* Total visual width = exactly 320px */
}

Summary

The CSS Box Model consists of four layers: content, padding, border, and margin. By default, padding and border increase an element's total rendered width. Using box-sizing: border-box makes width calculations intuitive by keeping padding and border inside the defined width. Applying this globally is a best practice in all modern CSS projects.