Every Element Is a Box

Every Element Is a Box: The Box Model: Content, Padding, Border and Margin, Margin, Padding and Border in Practice, box-sizing: Making Width Mean What You…

Updated

  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.