Back to overview

border-box vs content-box (Box Model in Simple Terms)

1 min read

Before mastering Flexbox or Grid,
you must understand how CSS calculates size.

Side-by-side CSS box model comparison showing content-box where padding and border increase total size, and border-box where padding and border are included inside the defined width.box behavior where width applies only to content, with padding and border added outside, increasing total element size

content-box (Default behavior)

In content-box, the width & height apply only to the content.
Padding and border are added outside, increasing the final size.

.box {
  width: 200px;
  padding: 20px;
  border: 10px solid #333;
  box-sizing: content-box;
}

👉 Actual width = 200 + 40 + 20 = 260px

🧩 border-box (Developer-friendly)

In border-box, padding and border are included inside the width & height.

.box {
  width: 200px;
  padding: 20px;
  border: 10px solid #333;
  box-sizing: border-box;
}

👉 Actual width = 200px (no surprise math)

More on CSS

Recent Tips

Validate on Backend. Always.

Frontend validation improves user experience. It shows instant errors and prevents obvious mistakes like empty fields or invalid email formats. But frontend validation is never security. Anyone can bypass it using DevTools, Postman, or by directly calling your API. That’s why backend validation is mandatory it protects your database and business logic from invalid or malicious data.

Read more about Validate on Backend. Always.JavaScript