CSS - Box Sizing

css

// CSS - The box-sizing property:

The box-sizing property is used to alter the default CSS box model used to 
calculate width and height of the elements. It is possible to use this property 
to emulate the behavior of browsers that do not correctly support the CSS box 
model specification.  This is an experimental technology.

/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

1. content-box: This is the initial and default value as specified by the CSS 
   standard. The width and height properties are measured including only the 
   content, but not the padding, border or margin. Note: Padding, border & 
   margin will be outside of the box e.g. IF .box {width: 350px;} THEN you 
   apply {border: 10px solid black;} RESULT {rendered in the browser} .box 
   {width: 370px;}.  So simply the dimension of element is calculated as, 
   width = width of the content, and height = height of the content (excluding 
   the values of border and padding).
2. border-box: The width and height properties include the content, the padding 
   and border, but not the margin. This is the box model used by Internet 
   Explorer when the document is in Quirks mode. Note that padding and border 
   will be inside of the box e.g.  .box {width: 350px; border: 10px solid 
   black;} leads to a box rendered in the browser of width: 350px. The content 
   box can't be negative and is floored to 0, making it impossible to use 
   border-box to make the element disappear.  Here the dimension is calculated 
   as, width = border + padding + width of the content, and height = border + 
   padding + height of the content.
3. padding-box: The width and height properties include the content, the padding 
   but neither the border, nor the margin. Only Firefox implemented this value, 
   and it was removed in Firefox 50.