# 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: November 10, 2026

1. [The Box Model: Content, Padding, Border and Margin](https://www.ask-codey.com/lessons/css-box-model) (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](https://www.ask-codey.com/lessons/css-margin-padding-border) (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](https://www.ask-codey.com/lessons/css-box-sizing) (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.

Source: https://www.ask-codey.com/courses/css-in-depth/topics/css-every-element-is-a-box