Box Model

The CSS box model describes the rectangular boxes generated for elements, consisting of content, padding, border, and margin areas.

Overview

Every element in web design is a rectangular box. The CSS box model defines how these boxes are sized and how their different parts (content, padding, border, margin) interact. Understanding the box model is fundamental to controlling layout and spacing in CSS.

Example

css
.box {
  /* Content size */
  width: 200px;
  height: 100px;

  /* Inside the border */
  padding: 20px;

  /* The border itself */
  border: 2px solid black;

  /* Outside the border */
  margin: 10px;

  /* Modern box-sizing */
  box-sizing: border-box;
}

Key Points

  • Four areas: content, padding, border, margin
  • Default: box-sizing: content-box (width = content only)
  • Modern: box-sizing: border-box (width = content + padding + border)
  • Margin collapses vertically between elements
  • Padding is inside border, margin is outside

Learn More