CSS

Lesson 4: The CSS Box Model

Duration: 75 minutes | Difficulty: Intermediate | Prerequisites: Lessons 1-3 completed

📋 Learning Objectives

By the end of this lesson, you will be able to:

Understand the four components of the CSS box model
Control element dimensions with width and height
Apply padding, borders, and margins effectively
Use box-sizing property to control sizing behavior
Debug layout issues using browser developer tools
Calculate total element size including padding, borders, and margins

🎯 Understanding the Box Model

Every HTML element is essentially a rectangular box with four components:

┌─────────────────────────────────┐
│           MARGIN                │
│  ┌─────────────────────────────┐│
│  │        BORDER               ││
│  │  ┌─────────────────────────┐││
│  │  │      PADDING            │││
│  │  │  ┌─────────────────────┐│││
│  │  │  │     CONTENT         ││││
│  │  │  │                     ││││
│  │  │  └─────────────────────┘│││
│  │  └─────────────────────────┘││
│  └─────────────────────────────┘│
└─────────────────────────────────┘

🔧 Box Model Components

1. Content Area

The innermost area containing text, images, or other elements.

.box {
    width: 200px;      /* Content width */
    height: 100px;     /* Content height */
}

2. Padding

Space between content and border (inside the element).

/* All sides equal */
.box { padding: 20px; }

/* Vertical | Horizontal */
.box { padding: 20px 40px; }

/* Top | Right | Bottom | Left */
.box { padding: 10px 20px 15px 30px; }

/* Individual sides */
.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 30px;
}

3. Border

The border surrounding the padding and content.

/* Shorthand: width style color */
.box { border: 2px solid #333; }

/* Individual properties */
.box {
    border-width: 2px;
    border-style: solid;
    border-color: #333;
}

/* Different borders for each side */
.box {
    border-top: 3px solid red;
    border-right: 2px dashed blue;
    border-bottom: 1px dotted green;
    border-left: 4px double purple;
}

/* Border radius for rounded corners */
.box {
    border-radius: 8px;           /* All corners */
    border-radius: 10px 5px;      /* Top-left/bottom-right | Top-right/bottom-left */
    border-radius: 10px 5px 8px 3px; /* Individual corners clockwise from top-left */
}

4. Margin

Space outside the border (between elements).

/* Same syntax as padding */
.box { margin: 20px; }
.box { margin: 20px 40px; }
.box { margin: 10px 20px 15px 30px; }

/* Auto centering */
.centered {
    width: 300px;
    margin: 0 auto;  /* Centers horizontally */
}

/* Negative margins */
.overlap {
    margin-top: -10px;  /* Moves element up, overlapping previous element */
}

⚙️ Box Sizing Property

Default: Content Box

.content-box {
    box-sizing: content-box; /* Default */
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    /* Total width = 200px + 40px + 4px = 244px */
}

Border Box (Recommended)

.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    /* Total width = 200px (padding and border included) */
}

/* Apply to all elements (common reset) */
* {
    box-sizing: border-box;
}

🛠️ Hands-On Exercises

Exercise 1: Box Model Visualization

Create boxes to understand spacing:

<div class="container">
    <div class="box box-1">Box 1</div>
    <div class="box box-2">Box 2</div>
    <div class="box box-3">Box 3</div>
</div>

.container {
    background-color: #f0f0f0;
    padding: 20px;
}

.box {
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 60px;
    margin-bottom: 20px;
}

.box-1 {
    width: 200px;
    height: 60px;
    padding: 10px;
    border: 3px solid #2980b9;
    margin: 15px;
}

.box-2 {
    width: 200px;
    height: 60px;
    padding: 20px 40px;
    border: 1px dashed #2980b9;
    margin: 10px 0;
}

.box-3 {
    width: 200px;
    height: 60px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

Exercise 2: Card Component

Build a professional card component:

.card {
    box-sizing: border-box;
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    margin: 20px auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.card-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-content {
    padding: 24px;
}

.card-title {
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
}

.card-text {
    margin: 0 0 16px 0;
    color: #4a5568;
    line-height: 1.6;
}

.card-button {
    display: inline-block;
    padding: 10px 20px;
    background: #667eea;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.card-button:hover {
    background: #5a67d8;
}

🚨 Common Pitfalls

Forgetting box-sizing: Elements larger than expected due to padding/borders
Margin collapse: Vertical margins between adjacent elements collapse to the larger value
Overflow issues: Content spilling out of fixed-height containers
Inconsistent spacing: Not using a systematic approach to margins and padding

🔍 Best Practices

Use border-box sizing for predictable layouts
Establish spacing scale (4px, 8px, 16px, 24px, 32px, etc.)
Use margins for space between elements, padding for space within elements
Avoid fixed heights when possible to allow content to flow naturally
Use CSS custom properties for consistent spacing values

📝 Assessment

Quick Quiz

What’s the total width of an element with width: 100px, padding: 10px, border: 2px, and box-sizing: content-box?
What’s the difference between margin and padding?
How do you center a block element horizontally?
What happens when two adjacent elements have margin-bottom: 20px and margin-top: 30px?

Practice Tasks

Create a navigation bar using the box model properties
Build a responsive card grid with consistent spacing
Debug a layout where elements don’t fit as expected
Practice calculating element dimensions with different box-sizing values

🔗 What’s Next?

In Lesson 5, we’ll explore Flexbox Layout, a powerful CSS layout method that makes it easy to align and distribute elements in containers, even when their size is unknown or dynamic.

The box model is fundamental to CSS layout. Master these concepts to avoid layout surprises and create predictable designs.