When an element has box-sizing: border-box,
it changes the default behavior of how
the browser calculates the total width
and
height of the element.
The width and height properties
will include the content, padding,
and border of the element.
Let us take a look at an example:
In the above code the height
and
width is calculated automatically
by the browser as follows:
As we can see, the width
and
height includes the padding
and
border values.
