---
# System prepended metadata

title: Box Model

---

# Box Model

box-sizing: content-box; default

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

How wide do you think .my-box will be?

260px
The default box sizing is content-box, which means padding and borders are added to the overall box.
.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
  box-sizing: content-box;
}

200px
200px would be correct if the box had box-sizing: border-box.
.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
  box-sizing: border-box;
}



https://piccalil.li/blog/a-modern-css-reset/