CSS Box Model

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

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

<style>
.box {
  padding: 20px;  /* 20px on all sides */
  background: #fce4ec;
  border: 2px solid #e91e63;
}
</style>
<div class="box">This box element has padding creating 20px of space between content and border</div>

3. Border

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

Example

<style>
.box {
  border: 2px solid #333;
  padding: 16px;
  background: #f9f9f9;
}
</style>
<div class="box">This box element has a border wrapping around the outside of padding</div>

4. Margin

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

Example

<style>
.box {
  margin: 10px;  /* 10px on all sides */
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  padding: 10px;
}
</style>
<div class="box">Box 1 - has 10px margin</div>
<div class="box">Box 2 - 20px gap from Box 1</div>
<div class="box">Box 3 - 20px gap from Box 2</div>

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

<style>
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  background: #e3f2fd;
  text-align: center;
  line-height: 1.5;
}
</style>
<div class="box">
  Content area 200×100px<br>
  Actual rendering 244×144px
</div>

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.

box-sizing Property

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

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."

border-box

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

Example: content-box vs border-box Comparison

<style>
.container {
  display: flex;
  justify-content: space-around;
}
.box {
  width: 300px;
  height: 200px;
  border: 10px solid indianred;
}
.item {
  width: 100%;
  background: rgba(49, 115, 187, 0.3);
  border: solid #5B6DCD 10px;
  padding: 15px;
}
.s1 { box-sizing: content-box; }
.s2 { box-sizing: border-box; }
</style>
<div class="container">
  <div class="box">
    <h3>content-box (default)</h3>
    <div class="item s1">width: 100% + padding + border = overflows parent</div>
  </div>
  <div class="box">
    <h3>border-box</h3>
    <div class="item s2">width: 100% includes padding + border = fits perfectly</div>
  </div>
</div>

Global border-box Setting

Many projects set this globally in their reset:

Example

<style>
*, *::before, *::after {
  box-sizing: border-box;
}
</style>
<div class="box-demo">Demo box</div>

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

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

❓ 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.