Q309- What is box-sizing in css?

box-sizing is a CSS property that defines how the total width and height of an element are calculated.

---

📦 Default Problem in CSS

By default, CSS adds padding and border outside the defined width/height.

div {
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

➡ Actual width = 200 + 40 + 10 = 250px ❌
This often breaks layouts.

---

✅ box-sizing Solutions

---

🔹 1. content-box (default)

box-sizing: content-box;

• Width/height apply only to content
• Padding + border are added extra

📐 Total size = content + padding + border

---

🔹 2. border-box (recommended)

box-sizing: border-box;

• Width/height include content + padding + border
• Element stays within defined size

📐 Total size = exactly what you set ✔

---

🧪 Example

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  box-sizing: border-box;
}

➡ Final width = 200px, not more ✔

---

🌍 Best Practice (Used in real projects)

* {
  box-sizing: border-box;
}

This makes layouts:

• Predictable
• Easier to manage
• Responsive-friendly

---

🎯 Short Interview Answer

box-sizing controls how an element’s width and height are calculated.
With border-box, padding and borders are included in the defined size, making layouts easier and more predictable.

---

⭐ One-line summary

box-sizing: border-box prevents layout breaking by including padding and border inside the element’s size.