box-sizing: border-box (and why every project enables it)

The default that everyone hates

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
}

How wide is the rendered card? With the default box-sizing: content-box — width applies to the content area only:

• Content: 300px
• + padding: 20 left + 20 right = 40px
• + border: 1 left + 1 right = 2px
• Total: 342px

You said width: 300px but the box rendered at 342px. Every padding/border change breaks your layout math.

The fix

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

Now width: 300px means the total box width is 300px, including padding and border. Content shrinks to fit.

content-box (default):    [content: 300] [padding: 40] [border: 2]  → 342px total
border-box:               [        content: 258 + padding: 40 + border: 2        ] = 300px

Why every project enables it

width: 100% finally means "the same as the parent" — even when your child has padding. Grid + flexbox calculations don't break when you add padding. You can ship.

Modern projects ship this universal selector first thing. Tailwind ships it. Bootstrap ships it. Every reset stylesheet from the past 10 years includes it.

The mental model

• content-box = width is the INNER size; box grows outward.
• border-box = width is the OUTER size; content shrinks inward.

For UI work, you almost always want the outer size to be predictable. So you almost always want border-box.