The Box Model

Every HTML element is treated as a rectangular box. The CSS box model describes how that box is sized and spaced — from the innermost content outward through padding, border, and margin.

The four layers

• → Content — the actual text, image, or child elements inside the box.
• → Padding — space between the content and the border.
• → Border — a visible (or invisible) line surrounding the padding.
• → Margin — space outside the border, pushing other elements away.

.box {
  padding: 20px;
  border: 2px solid black;
  margin: 16px;
  width: 200px;
}

box-sizing

By default, CSS uses content-box sizing — the width only applies to the content, and padding and border are added on top. Setting box-sizing: border-box includes padding and border in the element's total width, making layout calculations much simpler.

* {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* Total width is still 200px */
}

Try it yourself

Quiz