The Box Model

Every HTML element is a rectangular box made of four layers, from the inside out: content (the text/image itself), padding (space inside the border), border (a visible line around the padding), and margin (space outside the border, between this box and its neighbours).

Example 1: seeing all four layers at once

.box {
  width: 200px;
  padding: 20px;
  border: 4px solid #2f7dff;
  margin: 30px;
}

This box's actual rendered width, by default, is more than 200px — the browser adds the padding and border on top of the content width you set. That surprises almost every beginner at least once.

Example 2: box-sizing fixes the confusing part

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 4px solid #2f7dff;
  /* now the box is EXACTLY 200px wide, padding and border included */
}

box-sizing: border-box changes the rule so width means the total width, padding and border included, rather than just the content. This one line eliminates a huge share of "why is this wider than I set it to be" confusion, which is why many real projects set it globally with * { box-sizing: border-box; } right at the top of their stylesheet.