box-sizing is a new CSS3 property that is handy in overwriting the default BOX model given by the browser.
Let’s start with how box model works. All the block-level element (like
footer etc…) in the html must follow the box model. And which looks like below. So, this box model used to calculate the heights and widths of block level elements.
The width/height of an element gives the width/height of the content of the box, excluding padding and border. They are calculated like this:
Width = width + padding-left + padding-right + border-left + border-right
Height = height + padding-top + padding-bottom + border-top + border-bottom
Let’s see this with an example, for instance lets assume that we have div of class
box and it has some padding, margin and border.
border: solid 5px purple;
margin: 40px 20px;
padding: 20px 30px;
Now lets calculate the actual height/width of the boxxy on the screen.
``` Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom = 100 + 20 + 20 + 5 + 5 + 40 + 40 = 330
Width = width + padding-right + padding-left + border-right + border-left + margin-right + margin-left = 400 + 30 + 30 + 5 + 5 + 20 + 20 = 510 ```
This is how it works in all the browsers, However IE8 and below will not take add the padding and border to the width. We can fix that using a html5 doc type.
Now, imagin if you ever want to overwrite this behavior for some reason, then our super hero of the day will help us do that. Let’s say we have a
div with width 500px and a
div inside that. By default the child div will occupy the 100% width, now say If you give some padding and border to the child div all over then you can see a weird behavior of the box that is padding and border cut into the box.
You can see in the above example you cannot see the green background. To fix this one ugly solution will be giving
width: 90% or
width: 420px to the child container which will not work in fluid layouts. There are cases where we have to use the 100% width to the child container. Consider a
<textarea> unlike the child
div the textarea will not occupy the 100% width it depends on the
col attribue of the tag. So to make this look pretty with full width, we are forced to give 100% to the text area. Now, if we want to give some nice padding or border to the text area then the textarea will come out of the parent div, which is kind of wierd. So to fix this issue we can use this
box-sizing allows you to switch box models :
content-box: This is the default style as specified by the W3C. The width and height properties are measured including only the content, but not the border, margin, or padding.
border-box: The width and height properties include the padding and border, but not the margin. This is the box model used by IE when the document is in Quirks mode.
padding-box: The width and height properties include the padding size, and do not include the border or margin (only in Firefox).