CSS: CSS Box Model

Last updated: 2026-10-13

The Box Model is the foundation of CSS layout. In the CSS world, every HTML element is treated as a rectangular "box" composed of content area, padding, border, and margin.

Box Model Properties Quick Reference

Properties in this section: width height padding border margin box-sizing

1. Four Parts of the Box Model

From inside to outside:

┌────────────────────────────────────┐  ← Margin
│  ┌──────────────────────────────┐  │  ← Border
│  │  ┌─────────────────────────┐  │  │  ← Padding
│  │  │                         │  │  │
│  │  │     Content Area        │  │  │
│  │  │                         │  │  │
│  │  └────────────────────────┘  │  │
│  └──────────────────────────────┘  │
└────────────────────────────────────┘

(1) Content Area

The area where actual content resides, such as text and images. Width and height are controlled by the width and height properties.

(2) Padding

The space between the content area and the border, used to create whitespace between content and border.

▶ Example

(3) Border

The border line that wraps around the padding and content area.

▶ Example

(4) Margin

The space between the border and other elements, used to control distance between elements.

▶ Example

2. Actual Element Size

This is the most confusing part — an element's width and height don't equal the content area dimensions.

By default (box-sizing: content-box):

Total element width = width + padding-left + padding-right + border-left + border-right
Total element height = height + padding-top + padding-bottom + border-top + border-bottom

For example:

▶ Example

This box's actual rendering size is:

• Total width = 200 + 20×2 + 2×2 = 244px
• Total height = 100 + 20×2 + 2×2 = 144px

If you thought this box was only 200×100, you're wrong! Many beginners stumble here.

3. box-sizing Property

To solve the "actual size is larger than set" problem, CSS3 introduced the box-sizing property.

(1) content-box (default)

width and height only include the content area; padding and border are not included. This is the default and the source of the "trap."

(2) border-box

width and height include content + padding + border; border and padding won't "expand" the element:

▶ Example: content-box vs border-box Comparison

(3) Global border-box Setting

Many projects set this globally in their reset:

▶ Example

4. Debugging the Box Model

Use browser developer tools to visually inspect the box model:

1. Right-click an element on the page, select "Inspect"
2. Select the element in the Elements panel
3. Switch to Computed or Layout panel
4. You'll see a box model diagram showing content, padding, border, and margin values

5. Box Model Differences Across Element Types

• Block-level elements: Default width is 100% of parent container; height determined by content
• Inline elements: Don't accept width and height; padding/margin only effective horizontally
• Inline-block elements: Can set width/height, but don't occupy a full line

Properties in this section: width height padding border margin box-sizing

❓ FAQ

📖 Summary

• The Box Model is the most fundamental and important CSS concept
• Understanding the four-layer structure of content, padding, border, and margin — and how box-sizing affects dimension calculations — is a prerequisite for writing reliable layouts
• Setting box-sizing: border-box as a global default at the start of a project saves much trouble with dimension calculations

📝 Exercises

Basic

1. Create a 200×200 box with padding of 30px and border of 5px solid. Use browser developer tools to check actual rendering dimensions and verify the box model formula.
2. Copy the box above, add box-sizing: border-box, observe actual size changes, and compare with the previous exercise.

Intermediate

3. Create a page with two side-by-side boxes, adjust their margins, and observe the "margin collapse" phenomenon (block-level elements' top/bottom margins take the maximum instead of adding).
4. Use border-box to create a "two-column layout with 50% width each and 20px gap between them."

Challenge

5. Create a card component with:
   • Fixed width of 300px
   • 20px padding
   • 1px solid #ddd border
   • 8px border-radius
   • Use border-box to ensure total width is always 300px
6. Create a form layout using box model calculations to perfectly align input fields and buttons.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us