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

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).

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.

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: none doesn’t hide visually while keeping space — it removes the element. To hide while keeping space, use visibility: hidden or opacity: 0.

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.

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.

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; }

1fr means “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.

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.