The Box Model and Units

Every element on a page is a box. Learn its parts (content, padding, border and margin), make width mean what you think with box-sizing, choose between px, rem, em, % and viewport units, and put your first page online for free.

Updated

Every Element Is a Box

  1. The Box Model: Content, Padding, Border and Margin (Novice): Every element on a page is a box with four layers, content, padding, border and margin, and knowing them is how you control every bit of space on a page.
  2. Margin, Padding and Border in Practice (Apprentice): Write padding and margin in one line with the clockwise shorthands, frame a box with border and border-radius, center it with auto margins, and know why two margins can turn into one.
  3. box-sizing: Making Width Mean What You Think (Apprentice): By default a box's width leaves out its padding and border, so it comes out wider than you asked; box-sizing border-box makes the width you write the width you get.

Sizes and Units

  1. Units: px, rem, em, % and Viewport Units (Apprentice): Every size in CSS needs a unit, and choosing the right one, px, rem, em, %, vw or vh, decides whether your page grows with the reader's text, fits its space and stays readable.

Share Your Work

  1. Put Your Page Online for Free (Novice): Put your page on the web for free with GitHub Pages, uploading its files in the browser with no Git needed, so anyone you send the link to can see it.

Exercise: Trading Cards

  1. Exercise: Trading Cards (Apprentice): Turn three plain Forest Friends cards into real-looking trading cards with border-box, rem spacing, borders, rounded corners and auto margins, and let the tests check each part.