CSS Box Sizing

CSS Box Sizing

The box-sizing property allows us to include the padding and border in an element's total width and height.

Without box-sizing

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element

height + padding + border = actual height of an element

With box-sizing: border-box

The box-sizing: border-box; property allows us to include the padding and border in an element's total width and height.

* {
  box-sizing: border-box;
}

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}