What does box-sizing: border-box do?

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

Those three lines belong at the top of every stylesheet you write.

#The problem it solves

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid;
}

With the default content-box, that element occupies 344px — 300 + 20 + 20 + 2 + 2. Put two of them in a 600px container expecting a perfect fit and the second wraps.

With border-box, it occupies exactly 300px and the padding eats inward.

#Why the default is wrong

content-box is what the original CSS specification chose. Internet Explorer implemented border-box instead, which turned out to be what everyone actually wanted — but by the time that was clear, changing the default would have broken the web. So it stays, and every project opts out on line one.

#It matters most with percentages

.col {
  width: 50%;
  padding: 1rem;
}

Under content-box, two of these overflow their container every time, because 50% + 2rem + 50% + 2rem > 100%. Under border-box they fit exactly.

#Modern alternatives

Grid and flexbox largely sidestep the issue — 1fr and flex: 1 distribute space after padding is accounted for. But the moment you set an explicit width or height, border-box is what saves you.