CSS · Fundamentals

CSS Box Model

Understanding how every HTML element is a box with content, padding, border, and margin

Find videos you like?

Save to resource drawer for future reference!

What is the Box Model?

Every element is a rectangular box

The Box Concept

In CSS, every HTML element is treated as a rectangular box. The box model describes how these boxes are sized and spaced, consisting of four parts: Content, Padding, Border, and Margin.

Box Model Layers (Outside → Inside)

Margin (Outermost)

Space outside the element

Border

The element's border

Padding

Space inside the element

Content

Your actual content

Text, images, etc.

Four Parts of the Box Model

Understanding each layer from inside out

1. Content

The actual content of the element - text, images, or other elements

width: 200px;
height: 100px;

2. Padding

Space between content and border - inside the element

padding: 20px;
padding-top: 10px;

3. Border

A line around the padding and content

border: 2px solid black;
border-radius: 10px;

4. Margin

Space outside the border - creates distance from other elements

margin: 30px;
margin-left: auto;

Interactive Box Model Demo

See how each part affects the element

Box Model Interactive Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h2>🎨 Box Model Visualization</h2>
      <div style="display: flex; justify-content: center; position: relative;">
        <div class="box-demo">
          <span class="label margin-label">Margin</span>
          <span class="label border-label">Border</span>
          <span class="label padding-label">Padding</span>
          <div class="box-content">
            <strong>Content Area</strong><br>
            Your actual content
          </div>
        </div>
      </div>
      <div class="info-section">
        <div class="info-card margin-card">
          <strong>Margin</strong><br>
          <small>40px all sides</small>
        </div>
        <div class="info-card border-card">
          <strong>Border</strong><br>
          <small>8px solid</small>
        </div>
        <div class="info-card padding-card">
          <strong>Padding</strong><br>
          <small>30px all sides</small>
        </div>
        <div class="info-card content-card">
          <strong>Content</strong><br>
          <small>300px width</small>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Calculating Element Size

How the total size is calculated

Total Element Width Formula

Total Width = Content Width + Padding (left + right) + Border (left + right) + Margin (left + right)

Example Calculation

width: 200px;
padding: 20px;
border: 5px;
margin: 15px;

Total Width = 200 + (20×2) + (5×2) + (15×2)
            = 200 + 40 + 10 + 30
            = 280px

200px

Content

+ 40px

Padding

+ 10px

Border

+ 30px

Margin

The box-sizing Property

Making sizing easier to work with

By default, width and height only apply to the content. But you can change this behavior:

content-box (default)

box-sizing: content-box;
width: 200px;
padding: 20px;

/* Total width = 240px */

Width applies to content only

border-box (recommended) ⭐

box-sizing: border-box;
width: 200px;
padding: 20px;

/* Total width = 200px */

Width includes padding and border

Pro Tip

Use box-sizing: border-box for easier sizing! Many developers apply this to all elements:

* { box-sizing: border-box; }

Remember

Every element is a box with 4 parts: content, padding, border, margin

Padding is inside the border (adds to element size)

Margin is outside the border (creates space between elements)

Use border-box for easier, more intuitive sizing

Previous Topic

Text Wrapping

text-wrap (balance, pretty), word-break, overflow-wrap, hyphens, and advanced text layout.

Next Topic

Display Property

Block, inline, inline-block, none, contents, flow-root, and modern display values.

Ask a Question

Have a question about The Box Model? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Fundamentals

CSS Box Model

Understanding how every HTML element is a box with content, padding, border, and margin

Find videos you like?

Save to resource drawer for future reference!

What is the Box Model?

Every element is a rectangular box

The Box Concept

Box Model Layers (Outside → Inside)

Margin (Outermost)

Space outside the element

Border

The element's border

Padding

Space inside the element

Content

Your actual content

Text, images, etc.

Four Parts of the Box Model

Understanding each layer from inside out

1. Content

The actual content of the element - text, images, or other elements

width: 200px;
height: 100px;

2. Padding

Space between content and border - inside the element

padding: 20px;
padding-top: 10px;

3. Border

A line around the padding and content

border: 2px solid black;
border-radius: 10px;

4. Margin

Space outside the border - creates distance from other elements

margin: 30px;
margin-left: auto;

Interactive Box Model Demo

See how each part affects the element

Box Model Interactive Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h2>🎨 Box Model Visualization</h2>
      <div style="display: flex; justify-content: center; position: relative;">
        <div class="box-demo">
          <span class="label margin-label">Margin</span>
          <span class="label border-label">Border</span>
          <span class="label padding-label">Padding</span>
          <div class="box-content">
            <strong>Content Area</strong><br>
            Your actual content
          </div>
        </div>
      </div>
      <div class="info-section">
        <div class="info-card margin-card">
          <strong>Margin</strong><br>
          <small>40px all sides</small>
        </div>
        <div class="info-card border-card">
          <strong>Border</strong><br>
          <small>8px solid</small>
        </div>
        <div class="info-card padding-card">
          <strong>Padding</strong><br>
          <small>30px all sides</small>
        </div>
        <div class="info-card content-card">
          <strong>Content</strong><br>
          <small>300px width</small>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Calculating Element Size

How the total size is calculated

Total Element Width Formula

Total Width = Content Width + Padding (left + right) + Border (left + right) + Margin (left + right)

Example Calculation

width: 200px;
padding: 20px;
border: 5px;
margin: 15px;

Total Width = 200 + (20×2) + (5×2) + (15×2)
            = 200 + 40 + 10 + 30
            = 280px

200px

Content

+ 40px

Padding

+ 10px

Border

+ 30px

Margin

The box-sizing Property

Making sizing easier to work with

By default, width and height only apply to the content. But you can change this behavior:

content-box (default)

box-sizing: content-box;
width: 200px;
padding: 20px;

/* Total width = 240px */

Width applies to content only

border-box (recommended) ⭐

box-sizing: border-box;
width: 200px;
padding: 20px;

/* Total width = 200px */

Width includes padding and border

Pro Tip

Use box-sizing: border-box for easier sizing! Many developers apply this to all elements:

* { box-sizing: border-box; }

Remember

Every element is a box with 4 parts: content, padding, border, margin

Padding is inside the border (adds to element size)

Margin is outside the border (creates space between elements)

Use border-box for easier, more intuitive sizing

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Text Wrapping

Display Property

Building Your Learning Module...

CSS Box Model

The Box Concept

Box Model Layers (Outside → Inside)

1. Content

2. Padding

3. Border

4. Margin

Box Model Interactive Demo

Total Element Width Formula

Example Calculation

content-box (default)

border-box (recommended) ⭐

Pro Tip

Remember

Text Wrapping

Display Property

CSS Box Model

The Box Concept

Box Model Layers (Outside → Inside)

1. Content

2. Padding

3. Border

4. Margin

Box Model Interactive Demo

Total Element Width Formula

Example Calculation

content-box (default)

border-box (recommended) ⭐

Pro Tip

Remember