CSS Box Sizing

The CSS Box Model describes the way block boxes are formatted. Block boxes can be given dimensions, margins, padding, and borders.

When we add these properties to a block box, and that box has a height and / or width applied, that box will increase in size according to the values assigned to these properties.

Example:

Assume we have placed a div tag on the page. The div tag generates a Block Box.

Assume that we gave that div a width of 500px and gave it padding of 10px on all 4 sides of the box.

According to the CSS Box Model, the total width of that div is now 520px: 500px + 10px + 10px

In the above example, the box properties (padding, margins, borders) are added to the box, making it grow is size.

CSS - Box Sizing Property

Now, with the CSS3 box-sizing property, we can change the way box properties are calculated and rendered in a browser.

If we use box-sizing with a value of "border-box", then borders and padding will be added to the inside of the box and will not cause the total width or height of a block box to increase in size.

Box-Sizing with a value of 'border-box' can really come in handy. For instance, let's suppose you add a div tag to the page, you float the div to the left or right. Well, when you float a div, you need to give that div a width. Otherwise, you will not have control over the total width and your layout or design may suffer because of this. Thus, a width is needed.

Now suppose you need to add padding to this floated div that has a width, but you do not have enough space to accommodate this or you find yourself having positioning issues due to this -- a simple way to handle this is to use the box-sizing property with a value of border-box.

MUST USE VENDOR PRE-FIXES

Because box-sizing only has the partial support for most browsers, we must use these pre-fixes to gain full support in all the browsers.

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
} 

box-sizing:	used to control the way box properties are calculated when added to a Block Box.
Initial {Default) Value:	content-box (specified borders, padding, and margins will be added to the total height and or width if these dimensions are specified.)
Values:	content-box | border-box | Inherit
Inherited:	No
box-sizing:	Border-box; specified borders and padding will be added to the inside of the box and will not cause the total width or height of a block box to increase in size.