What is Box-Sizing:Border-Box and other Values?

Box sizing affect how Box Size will be rendered. Box size can include padding and border or it can exclude border and padding while taking height and width. It is here to solve your measurement problem of Block element.

I know you have calculated box (div/p) size earlier if you have worked on CSS. General scenario is when you try to have few DIVs on a container. In that case you may have counted total width (height) of all DIVs and added border and padding to it to understand if it will fit in parent Div or not. For that same reason you may have counted on padding and border of all divs so that you can understand possibilities.
Box-sizing can solve this problem.

Suppose, you want two elements take 100% of the parent elements. If any or both of those elements have border (and/or padding) then you cannot write css like this for them:
.box1 {width:50%}
.box2 {width:50%}

Because even if 1px border you have added in any element then 2nd box will go down the first element due to lack of space. In this way you may have found experimentation also tough. For experiment you cannot vary border or padding in Firebug without risk of another element going down another element.

Try this example taken from Box-Sizing at W3Schools with some modification.

CSS Code:


<style>
div.container
{
    width:30em;
    border:1em solid;
    overflow:auto;
}
div.box
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    border:1em solid red;
    float:left;
}
</style>

HTML Code:


<div class="container">
    <div class="box">This div occupies the left half.</div>
    <div class="box">This div occupies the right half.</div>
</div>

    Box-Sizing Values:

  • content-box - Default value as you know it from CSS2. You are practiced to it. Here Padding and border are not considered in given height and width. So, to understand how much space it takes on page, you add padding and border to height and width.
  • inherit - Inherit the values from parent.
  • border-box - Already discussed above in details with examples.

Browser Support:
All browser support it now. IE support partially from IE8.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>