# 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/