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+ */
}
-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. |
