Every element is a box

Every element the browser draws is a rectangle, and four things decide its size:

• content — the text or image inside
• padding — space between the content and the border
• border — the line around it
• margin — space pushed out, between this box and the next

.card {
  padding: 16px;
  border: 1px solid #d4d4d8;
  margin-bottom: 12px;
}

The surprise

By default, width: 300px sets the width of the content, and padding and border are added on top — so the box on screen is wider than 300px. Almost nobody wants that, so almost every stylesheet starts with:

* { box-sizing: border-box; }

Now width: 300px means the whole box is 300px, padding and border included.

Try it

In the playground, comment out the box-sizing rule and watch both cards get wider than the number says. Then put it back.