Manuals / CSS Layout / Ch 1

StartBeginner30 min read

1. Box model & flow

CSS Layout · 12 pages source format

Margin, border, padding, content — and normal flow.

What you'll learn

  • Box model
  • display
  • DevTools

Key idea

Every element is a box. box-sizing: border-box makes sizes predictable.

Quick check

border-box includes…

Do this now

Write 3 notes on: Box model.

Clear?

Practice

Inspect three elements and sketch their boxes on paper.

Starter
# Box model
# try one small experiment

Do this now

Commit one file practicing Box model.

Clear?

Checklist