>_
CodeXPal
🎨

The CSS Box Model

Beginner
70 XP
25 min
Lesson Content

The CSS Box Model

Every HTML element is a rectangular box. The CSS box model describes how these boxes are sized and spaced. It consists of four parts: content, padding, border, and margin.

Box Model Components

  • Content: The actual content (text, images, etc.)
  • Padding: Space inside the element, between content and border
  • Border: A line around the padding
  • Margin: Space outside the element, between border and other elements

Visual Representation

┌─────────────────────────┐ ← Margin (outside)
│ ┌─────────────────────┐ │
│ │ ┌─────────────────┐ │ │ ← Border
│ │ │   ┌───────────┐ │ │ │
│ │ │   │  Content  │ │ │ │ ← Padding
│ │ │   └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └─────────────────────┘ │
└─────────────────────────┘

Example

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #ccc;
  margin: 10px;
}
Example Code

Create a box with padding, border, and margin

<!DOCTYPE html>
<html><head><style>
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #3b82f6;
  margin: 15px;
  background: #eff6ff;
}
</style></head><body>
<div class="box">Box model demo</div>
</body></html>

Expected Output:

Box model demo
Study Tips
  • •Read the theory content thoroughly before practicing
  • •Review the example code to understand key concepts
  • •Proceed to the Practice tab when you're ready to code