CSSCSS Tutorial

Lesson

CSS Box Model

10 min reading

Free Course

CSS Box Model: Content, Padding, Border, and Margin Layers

The CSS Box Model is the foundational layout concept in CSS. Every HTML element on a web page is rendered inside a rectangular box composed of four layered areas: Content, Padding, Border, and Margin.

Box Model Layers Breakdown

The total visual dimensions of an element depend on how browser layout engines calculate box layer dimensions:

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid #38bdf8;
    margin: 15px;
    box-sizing: border-box; /* Includes padding & border inside width */
}

The 4 Box Model layers explained from inside to outside:

Content: The core area where text, images, or child elements reside.
Padding: Transparent inner spacing area surrounding the content (inside the border).
Border: The surrounding line enclosing content and padding.
Margin: Transparent outer spacing separating the element box from adjacent layout elements.

CSS Box Model Visual Diagram

flowchart TD
    A["MARGIN (Outer Spacing Layer)"] --> B["BORDER (Outline Boundary Layer)"]
    B --> C["PADDING (Inner Spacing Layer)"]
    C --> D["CONTENT (Text / Images / Children)"]

Box-Sizing: `content-box` vs `border-box`

By default, CSS uses box-sizing: content-box, where padding and borders add extra width to the declared width. Modern web development uses box-sizing: border-box so declared width includes padding and border:

/* Universal reset for modern box model sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Box Model Demonstration</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        .box-demo {
            width: 100%;
            max-width: 400px;
            padding: 24px;
            border: 4px solid #38bdf8;
            margin: 20px auto;
            background-color: #1e293b;
            border-radius: 8px;
        }
    </style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">

    <div class="box-demo">
        <h3 style="margin-top: 0; color: #38bdf8;">Border-Box Calculation</h3>
        <p>With <code>box-sizing: border-box</code>, the padding and border are included in the max-width!</p>
    </div>

</body>
</html>

Best Practices

Apply box-sizing: border-box globally: Use a universal CSS reset (* { box-sizing: border-box; }) so element widths remain predictable across all layout designs.
Differentiate margin and padding: Use margin for pushing away adjacent elements and padding for internal element spacing.
Inspect box model layers using Developer Tools: Press F12 in your browser to inspect the visual box model diagram tab.

Self-Check Challenge

Write a universal CSS reset rule applying box-sizing: border-box to all elements (*, *::before, *::after)!

Save Your Progress

Unlock Your
Full Potential.

Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.

Quick Access With

Enterprise-Grade Security Protocol

Recommended Courses & Books

Try it Yourself

Experiment with the code from this lesson in our interactive playground.

Open Playground

Stuck on this lesson?

Join our community of senior developers.

Ask in Forum

CSSCSS Tutorial

Lesson

CSS Box Model

10 min reading

Free Course

CSS Box Model: Content, Padding, Border, and Margin Layers

The CSS Box Model is the foundational layout concept in CSS. Every HTML element on a web page is rendered inside a rectangular box composed of four layered areas: Content, Padding, Border, and Margin.

Box Model Layers Breakdown

The total visual dimensions of an element depend on how browser layout engines calculate box layer dimensions:

.box {
    width: 300px;
    padding: 20px;
    border: 5px solid #38bdf8;
    margin: 15px;
    box-sizing: border-box; /* Includes padding & border inside width */
}

The 4 Box Model layers explained from inside to outside:

Content: The core area where text, images, or child elements reside.
Padding: Transparent inner spacing area surrounding the content (inside the border).
Border: The surrounding line enclosing content and padding.
Margin: Transparent outer spacing separating the element box from adjacent layout elements.

CSS Box Model Visual Diagram

flowchart TD
    A["MARGIN (Outer Spacing Layer)"] --> B["BORDER (Outline Boundary Layer)"]
    B --> C["PADDING (Inner Spacing Layer)"]
    C --> D["CONTENT (Text / Images / Children)"]

Box-Sizing: `content-box` vs `border-box`

By default, CSS uses box-sizing: content-box, where padding and borders add extra width to the declared width. Modern web development uses box-sizing: border-box so declared width includes padding and border:

/* Universal reset for modern box model sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Box Model Demonstration</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        .box-demo {
            width: 100%;
            max-width: 400px;
            padding: 24px;
            border: 4px solid #38bdf8;
            margin: 20px auto;
            background-color: #1e293b;
            border-radius: 8px;
        }
    </style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">

    <div class="box-demo">
        <h3 style="margin-top: 0; color: #38bdf8;">Border-Box Calculation</h3>
        <p>With <code>box-sizing: border-box</code>, the padding and border are included in the max-width!</p>
    </div>

</body>
</html>

Best Practices

Apply box-sizing: border-box globally: Use a universal CSS reset (* { box-sizing: border-box; }) so element widths remain predictable across all layout designs.
Differentiate margin and padding: Use margin for pushing away adjacent elements and padding for internal element spacing.
Inspect box model layers using Developer Tools: Press F12 in your browser to inspect the visual box model diagram tab.

Self-Check Challenge

Write a universal CSS reset rule applying box-sizing: border-box to all elements (*, *::before, *::after)!

Save Your Progress

Unlock Your
Full Potential.

Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.

Quick Access With

Enterprise-Grade Security Protocol

Recommended Courses & Books

Try it Yourself

Experiment with the code from this lesson in our interactive playground.

Open Playground

Stuck on this lesson?

Join our community of senior developers.

Ask in Forum

CSS Box Model

CSS Box Model: Content, Padding, Border, and Margin Layers

Box Model Layers Breakdown

CSS Box Model Visual Diagram

Box-Sizing: content-box vs border-box

Practical Code Example

Best Practices

Self-Check Challenge

Unlock Your Full Potential.

Recommended Courses & Books

Try it Yourself

Stuck on this lesson?

CSS Box Model

CSS Box Model: Content, Padding, Border, and Margin Layers

Box Model Layers Breakdown

CSS Box Model Visual Diagram

Box-Sizing: content-box vs border-box

Practical Code Example

Best Practices

Self-Check Challenge

Unlock Your Full Potential.

Recommended Courses & Books

Try it Yourself

Stuck on this lesson?

Box-Sizing: `content-box` vs `border-box`

Unlock Your
Full Potential.

Box-Sizing: `content-box` vs `border-box`

Unlock Your
Full Potential.