Box-sizing Property

The box-sizing property defines how the width and height of an element are calculated, whether they should include padding and borders, or not.

Box sizing defines how the width and height gets applied on an element.  Suppose you have 2 div next to each other, each having width: 50%. Now if you add padding to it, the 2nd div will jump to new line as they don’t fit. Now, each box’s actual width from border to border is 50% + padding + border. Note that if you give box-sizing: border-box to the div, then the div’s are side by side again.

Properties Value

It can take two possible values: content-box and border-box. (There was also a padding-box, which is now deprecated.)

content-box : This is the default value. The width and height of the element only include the content. It means, the border, padding and margin aren’t part of the width or height.

border-box : The padding and border are included in the width and height.

Setting box-sizing

By default it is set to content-box. We can change the default setting of all the elements to border-box using the below block of code.

html {
   box-sizing: border-box;
  -moz-box-sizing: border-box; /Firefox 1-3/
  -webkit-box-sizing: border-box; /* Safari */
}
*, *:before, *:after {
   box-sizing: inherit;
}

Below is the box-sizing example in codepen: