The Box Model

In CSS, every HTML element is treated as a rectangular box. The box model describes the space an element occupies and consists of four layers, from inside to outside:

1. Content — The actual content of the element (text, images, etc.). Controlled by width and height.
2. Padding — Space between the content and the border. Padding is transparent and pushes the border outward from the content.
3. Border — A visible (or invisible) edge around the padding. You can control its width, style, and color.
4. Margin — Space outside the border that separates the element from neighboring elements. Margins are always transparent.

Understanding the box model is essential because it directly affects layout. The total space an element takes up is the sum of its content, padding, border, and margin.

By default, width and height only apply to the content area. Padding and border are added on top, making the element larger than the specified width. This is called content-box sizing and it often leads to unexpected layout issues.

The border-box model changes this behavior so that width and height include padding and border. The content area shrinks to accommodate them:

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 3px solid black;
}
/* Total width is exactly 200px */
/* Content area = 200 - 40 - 6 = 154px */

Most modern CSS resets apply border-box to all elements:

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

This makes sizing much more predictable and is considered a best practice.