Box Model Review

Box Model Review

Before diving into positioning, you must understand the CSS Box Model. Every single element in CSS is a rectangular box, and the box model defines how that box is sized and spaced.

The Four Layers

Every element's box has four layers, from inside to outside:

1. Content — the actual text, image, or child elements
2. Padding — space between content and the border
3. Border — the visible border around the padding
4. Margin — space outside the border, pushing other elements away

Visual Representation

┌─────────────────────── Margin ──────────────────────┐
│                                                       │
│   ┌─────────────── Border ───────────────────┐       │
│   │                                           │       │
│   │   ┌─────── Padding ───────────────┐      │       │
│   │   │                               │      │       │
│   │   │      ┌── Content ──┐          │      │       │
│   │   │      │  Hello CSS  │          │      │       │
│   │   │      └─────────────┘          │      │       │
│   │   │                               │      │       │
│   │   └───────────────────────────────┘      │       │
│   │                                           │       │
│   └───────────────────────────────────────────┘       │
│                                                       │
└───────────────────────────────────────────────────────┘

Setting Box Model Properties

.box {
    /* Content size */
    width: 300px;
    height: 200px;

    /* Padding — inside the border */
    padding: 20px;
    padding: 10px 20px;           /* vertical | horizontal */
    padding: 10px 20px 15px 25px; /* top | right | bottom | left */

    /* Border */
    border: 2px solid #333;

    /* Margin — outside the border */
    margin: 20px;
    margin: 0 auto;  /* Center horizontally */
}

Total Width Calculation (Default)

.box {
    width: 300px;
    padding: 20px;      /* 20px on each side = 40px total */
    border: 2px solid;  /* 2px on each side = 4px total */
    margin: 10px;       /* 10px on each side = 20px total */
}

/* Total space occupied:
   Content:  300px
   + Padding: 40px  (20 × 2)
   + Border:   4px  (2 × 2)
   = Rendered width: 344px
   + Margin:  20px  (10 × 2)
   = Total space: 364px */

The Problem: content-box (Default)

By default, width only sets the content width. Padding and border are added on top, making elements larger than expected.

/* Default: box-sizing: content-box */
.box {
    width: 300px;
    padding: 20px;
    border: 2px solid;
}
/* Rendered width: 300 + 40 + 4 = 344px ← Wider than 300px! */

The Fix: border-box

/* border-box includes padding and border IN the width */
.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid;
}
/* Rendered width: 300px ← Exactly 300px! */
/* Content area shrinks to: 300 - 40 - 4 = 256px */

Global Reset (Best Practice)

/* Apply border-box to everything */
*, *::before, *::after {
    box-sizing: border-box;
}

/* This is the standard reset used by virtually every modern project.
   It makes width and height include padding and border. */

content-box vs border-box

Property	content-box (default)	border-box
width sets	Content width only	Content + padding + border
Padding/border	Added outside width	Included inside width
Predictability	Harder to reason about	What you set is what you get
Recommendation	Avoid	Always use this

Margin Collapse

A key box model behavior: vertical margins collapse. When two vertical margins touch, they merge into one (the larger wins):

.box-a { margin-bottom: 30px; }
.box-b { margin-top: 20px; }
/* Actual gap between them: 30px (not 50px!)
   The 30px and 20px collapse into the larger: 30px */

Horizontal margins never collapse. This only affects vertical margins between block elements.

Inspecting the Box Model

In Chrome DevTools:

1. Right-click an element → Inspect
2. In the Computed tab, you'll see a visual box model diagram
3. Hover over each layer to see it highlighted on the page
4. The diagram shows exact pixel values for content, padding, border, and margin

Key Takeaways

• Every element is a box with content, padding, border, and margin
• Default content-box adds padding/border outside the width
• Always use box-sizing: border-box for predictable sizing
• Vertical margins collapse — the larger margin wins
• Use DevTools' Computed tab to inspect the exact box model of any element