The box model & layout, how every pixel on the page got there.

Section · 01

The box model

Every element on a webpage is a rectangle. Around its content are three layers, each with its own size:

┌─────────── margin ─────────────┐
│ ┌───────── border ───────────┐ │
│ │ ┌─────── padding ────────┐ │ │
│ │ │      CONTENT           │ │ │
│ │ └────────────────────────┘ │ │
│ └────────────────────────────┘ │
└────────────────────────────────┘

content   — the text or image itself
padding   — space inside the border
border    — the line around the element
margin    — space outside the border (between elements)

You can set each side independently: padding-top, margin-left, border-bottom, etc. Or the shorthand: margin: 10px 20px (top/bottom 10, left/right 20).

Section · 02

box-sizing: the one CSS line you should always write

By default, width means the width of the content — padding and border are added on top. So a 200px wide element with 20px padding actually occupies 240px. This trips up everyone.

* {
  box-sizing: border-box;
}

/* Now width includes padding + border.
   200px wide stays 200px wide no matter the padding. */

This is on the first line of essentially every modern CSS reset. Tailwind, Bootstrap, every framework you’ll touch turns this on. You should too.

Section · 03

Display — block, inline, inline-block, none

From Unit 2 lesson 2: HTML elements come in block (full width, stack vertically) and inline (flow with text) flavors. You can change this in CSS:

display: block         — full width, stacks
display: inline        — flows with text, ignores width/height
display: inline-block  — flows with text BUT respects width/height
display: none          — removed from the layout entirely
display: flex          — flexbox container (see below)
display: grid          — grid container (see below)

display: nonedoesn’t hide visually while keeping space — it removes the element. To hide while keeping space, use visibility: hidden or opacity: 0.

Section · 04

Position — taking elements out of flow

position: static     — default; element flows normally
position: relative   — flows normally, but you can nudge it with top/left/etc.
position: absolute   — removed from flow, positioned vs nearest positioned ancestor
position: fixed      — removed from flow, positioned vs the viewport (stays on scroll)
position: sticky     — flows normally, then sticks at a threshold

When you need each

relative  — wrapper for an absolute child
absolute  — tooltips, dropdowns, badges on top of another element
fixed     — site-wide nav bar, modal overlays, back-to-top buttons
sticky    — table headers that stay visible while scrolling

Don’t use position for general layout. It exists for overlays and pinned things. For actual layout, use flex or grid.

Section · 05

Flexbox — one dimension at a time

Flexbox lays elements out along one axis — a row or a column. Set display: flex on a parent, and its children become flex items you can space, align, and reorder.

.row {
  display: flex;
  gap: 16px;                    /* spacing between children */
  justify-content: space-between; /* horizontal distribution */
  align-items: center;          /* vertical alignment */
}

/* Children */
.row > .grow { flex: 1; }       /* take up all available space */
.row > .fixed { flex: 0 0 200px; } /* exactly 200px, never grow or shrink */

The four flex properties you’ll use

flex-direction: row | column          — which axis (default row)
justify-content                       — alignment along the main axis
align-items                           — alignment across the cross axis
gap                                   — space between children

Flexbox replaced floats for almost everything. Centering used to be a meme — “how do you center a div” — now it’s three lines: display: flex; justify-content: center; align-items: center.

Section · 06

Grid — two dimensions at once

Grid lays elements out in rows and columns at the same time. Use it for actual grids: page layouts, dashboards, image galleries.

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;     /* sidebar + content */
  grid-template-rows: 60px 1fr;         /* header + body */
  gap: 16px;
  height: 100vh;
}

.header  { grid-column: 1 / -1; }       /* span all columns */
.sidebar { grid-row: 2; grid-column: 1; }
.main    { grid-row: 2; grid-column: 2; }

1frmeans “one fraction of remaining space.” Two columns of 1fr 2fr means the second is twice as wide as the first. repeat(3, 1fr) is shorthand for three equal columns.

Section · 07

Flex vs grid — when to pick which

Use flex when:
  - laying out items in a single row or column
  - aligning a small group of elements (nav bar, button cluster, card footer)

Use grid when:
  - you need both rows AND columns
  - the children need to align across rows and columns simultaneously
  - you have a clear "page layout" shape with named regions

You can (and will) nest them — a grid layout where one of the cells uses flex for its internal arrangement. There’s no conflict. The next lesson finishes Unit 2 with typography, accessibility, and the responsive CSS that ties the box model to the screen sizes you learned in Unit 1.