Day 3: The Box Model

What You'll Learn Today

• The box model structure (content, padding, border, margin)
• The box-sizing property
• The display property (block, inline, inline-block)
• Width and height control with various units
• Margin collapsing
• Overflow behavior

---

What Is the Box Model?

In CSS, every HTML element is treated as a box. Each box is made up of four areas, layered from inside out.

flowchart TB
    subgraph BoxModel["The CSS Box Model"]
        Margin["margin<br>Outer spacing"]
        Border["border<br>Border line"]
        Padding["padding<br>Inner spacing"]
        Content["content<br>Actual content"]
    end
    Margin --> Border --> Padding --> Content
    style Margin fill:#ef4444,color:#fff
    style Border fill:#f59e0b,color:#fff
    style Padding fill:#22c55e,color:#fff
    style Content fill:#3b82f6,color:#fff

.box {
    width: 300px;           /* content width */
    padding: 20px;          /* inner spacing */
    border: 2px solid #333; /* border */
    margin: 16px;           /* outer spacing */
}

Default Calculation (content-box)

Total rendered width = width + padding-left + padding-right + border-left + border-right

300px + 20px*2 + 2px*2 = 344px

---

box-sizing

content-box (Default)

width applies only to the content area. Padding and border are added on top.

border-box (Recommended)

width includes padding and border.

* {
    box-sizing: border-box;
}

.box {
    width: 300px;           /* total width is 300px */
    padding: 20px;
    border: 2px solid #333;
    /* content width = 300 - 40 - 4 = 256px */
}

flowchart LR
    subgraph CB["content-box"]
        C1["width = content only<br>Actual width = width + padding + border"]
    end
    subgraph BB["border-box"]
        C2["width = total width<br>Content shrinks automatically"]
    end
    style CB fill:#ef4444,color:#fff
    style BB fill:#22c55e,color:#fff

Best practice: Always set * { box-sizing: border-box; } at the top of your stylesheet.

---

Padding (Inner Spacing)

/* All four sides */
padding: 16px;

/* Vertical | Horizontal */
padding: 16px 24px;

/* Top | Horizontal | Bottom */
padding: 16px 24px 32px;

/* Top | Right | Bottom | Left (clockwise) */
padding: 16px 24px 32px 8px;

/* Individual sides */
padding-top: 16px;
padding-right: 24px;
padding-bottom: 32px;
padding-left: 8px;

---

Margin (Outer Spacing)

/* Same shorthand syntax as padding */
margin: 16px;
margin: 16px auto;     /* 16px top/bottom, auto centers horizontally */
margin: 0 auto;        /* center a block element */

/* Individual sides */
margin-top: 16px;
margin-bottom: 32px;

Margin Collapsing

When two elements are stacked vertically, their margins collapse — only the larger value is used.

h2 { margin-bottom: 24px; }
p  { margin-top: 16px; }
/* The gap is 24px (the larger value), NOT 40px */

flowchart TB
    subgraph Collapse["Margin Collapsing"]
        H2["h2<br>margin-bottom: 24px"]
        Gap["Actual gap: 24px<br>(the larger value wins)"]
        P["p<br>margin-top: 16px"]
    end
    H2 --> Gap --> P
    style Gap fill:#f59e0b,color:#fff

Note: Margin collapsing only occurs vertically. It does not happen horizontally, nor inside Flexbox or Grid containers.

---

Border

/* Shorthand */
border: 2px solid #3b82f6;

/* Individual properties */
border-width: 2px;
border-style: solid;    /* solid, dashed, dotted, double, none */
border-color: #3b82f6;

/* One side only */
border-top: 3px solid #3b82f6;
border-bottom: 1px dashed #e2e8f0;

/* Rounded corners */
border-radius: 8px;
border-radius: 50%;     /* circle */
border-radius: 16px 0;  /* top-left/bottom-right | top-right/bottom-left */

border-style	Appearance
solid	Solid line
dashed	Dashed line
dotted	Dotted line
double	Double line
none	No border

---

The display Property

block

div, p, h1, section, article { display: block; }

• Takes up the full available width
• Starts on a new line
• Can set width and height

inline

span, a, strong, em { display: inline; }

• Only as wide as its content
• Sits on the same line as neighbors
• Cannot set width or height
• Vertical margin and padding have limited effect

inline-block

.badge {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #3b82f6;
    border-radius: 4px;
}

• Sits on the same line (like inline)
• Can set width and height (like block)

flowchart TB
    subgraph Display["Comparing display Values"]
        Block["block<br>Full width, line break<br>width/height OK"]
        Inline["inline<br>Content width, no break<br>width/height NO"]
        IB["inline-block<br>Inline flow + sizing<br>width/height OK"]
    end
    style Block fill:#3b82f6,color:#fff
    style Inline fill:#22c55e,color:#fff
    style IB fill:#f59e0b,color:#fff

none

.hidden { display: none; }  /* completely hidden — no space reserved */

---

Width and Height Control

.container {
    width: 100%;
    max-width: 1200px;    /* maximum width */
    min-width: 320px;     /* minimum width */
    min-height: 100vh;    /* minimum height: full viewport */
}

Common CSS Units

Unit	Description	Example
px	Pixels (absolute)	16px
%	Percentage of parent	50%
em	Relative to parent font size	1.5em
rem	Relative to root font size	1rem
vw	1% of viewport width	100vw
vh	1% of viewport height	100vh

Recommendation: Use rem for font sizes and px or rem for spacing. Use % and max-width for fluid layouts.

---

Overflow

.box {
    width: 300px;
    height: 200px;
    overflow: hidden;     /* clip overflowing content */
    overflow: scroll;     /* always show scrollbars */
    overflow: auto;       /* scrollbars only when needed */
    overflow-x: hidden;   /* horizontal only */
    overflow-y: auto;     /* vertical only */
}

---

Practice: Card Component

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f1f5f9;
    padding: 32px;
}

.card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    max-width: 400px;
    margin: 0 auto 24px;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 200px;
    display: block;
}

.card-body {
    padding: 24px;
}

.card-body h2 {
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.card-body p {
    color: #64748b;
    margin-bottom: 16px;
}

.card-tag {
    display: inline-block;
    background-color: #eff6ff;
    color: #3b82f6;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: bold;
}

---

Summary

Concept	Description
Box model	content + padding + border + margin
box-sizing: border-box	Width includes padding and border
Margin collapsing	Vertical margins merge; the larger wins
display: block	Full width, starts on new line
display: inline	Content width, flows inline
display: inline-block	Inline flow with block sizing
overflow	Controls behavior of overflowing content

Key Takeaways

1. Always use box-sizing: border-box
2. Understand and expect margin collapsing in vertical layouts
3. Know the differences between block, inline, and inline-block
4. Combine max-width with % for flexible layouts

---

Exercises

Exercise 1: Basics

Build a card component with well-structured padding and margin that makes text comfortable to read.

Exercise 2: Applied

Use display: inline-block to lay out a horizontal list of tags.

Challenge

Set the same width on two boxes — one with content-box and one with border-box. Calculate the actual rendered width of each, then verify in the browser.

---

References

• MDN - The Box Model
• MDN - display

---

Next up: On Day 4, we dive into Typography — fonts, line height, letter spacing, and everything that makes text look great.