P2.3: The CSS Box Model

Every element on a web page is treated by the browser as a rectangular box. The CSS Box Model governs how sizing and spacing are calculated.

1. Anatomy of the Box Model

The box model consists of four nested layers:

• Content: The text or image itself.
• Padding: Transparent spacing immediately surrounding the content (inside the border).
• Border: A border surrounding the padding.
• Margin: Transparent spacing outside the border to separate elements.

Josh W. ComeauView Profile 🔗

Real-World Developer Case Study

8 Years Exp

RoleSenior CSS Educator

Salary₹65 Lakhs/yr equivalent

CompanyCSS for JS Devs

Core Tech Stack

CSS Box ModelLayout SystemsInteractive MDXReact

“Always apply box-sizing: border-box globally in your reset stylesheets. If you don't, padding and border additions will stretch your layout columns and break your layouts.”

2. Global Box-Sizing Reset

Use this universal reset at the top of your stylesheets:

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