The Box Model

Look closely at any web page and you'll see boxes everywhere: buttons, cards, paragraphs, images. In CSS, every element is a box. Understanding that box is the key to spacing and sizing everything.

The four layers

• Content: the text or image.
• Padding: space inside the border. It takes the background colour.
• Border: a line around the padding.
• Margin: space outside the border, pushing neighbours away. Always transparent.

Change the numbers and watch each layer grow. In the browser's DevTools (right-click → Inspect), the Computed tab draws this exact diagram for any element.

Shorthand: one to four values

Four values go clockwise from the top: top, right, bottom, left. The same works for margin. Borders are written as border: width style colour, e.g. border: 2px solid teal, with styles like solid, dashed and dotted.

box-sizing: border-box

By default, width sets only the content width; padding and border are added on top. That makes sizes hard to reason about:

With box-sizing: border-box, width includes padding and border. Almost every modern site starts its CSS with:

*, *::before, *::after {
  box-sizing: border-box;
}

Block, inline and inline-block

Later you'll meet display: flex and display: grid, which lay out a box's children.

Sizing and centring

• max-width lets a box shrink on small screens but stops it growing too wide. Prefer it to a fixed width.
• margin: 0 auto (or 20px auto) centres a block horizontally.
• img { max-width: 100%; height: auto; } keeps images inside their container: the fix for Day 3's oversized image. Put it in every stylesheet.
• border-radius rounds corners; 50% on a square makes a circle.
• box-shadow: x offset, y offset, blur, colour.

Margins collapse

When two vertical margins meet (say, a paragraph's bottom margin and the next one's top margin), they collapse into the larger one instead of adding up. It surprises everyone once. Flexbox and Grid layouts don't do this.

Recap

• Every element is a box: content → padding → border → margin.
• Shorthand: 1 value = all sides; 2 = vertical/horizontal; 4 = top, right, bottom, left.
• Use box-sizing: border-box everywhere.
• block (new line, sizable), inline (in text, no size), inline-block (both).
• max-width + margin: 0 auto centres; max-width: 100% keeps images inside.

Tomorrow: typography, colour and CSS variables.