Either you love it or hate it, but the content-box model is here to stay. Good news though is that we designers can now change what the box model will do for us instead of us working for it. Box-sizing has received some attention and current CSS3 specs allow the box to be sized as we would like with our trusty old CSS style sheets. Believe it or not box-sizing is not inherited. For example………..

body {
    box–sizing: border–box;
}

will not be inherited by other block level elements. Current standard of the W3 is the content-box model which calculates the total width of a box by the size of the width declared in the style sheet declaration + padding + border + margin that gives us the total block width.

Content-Box

#box1–content {
    box-sizing: content–box;
    width: 200px;
    padding: 10px;
    background-color: red;
}

Border-Box

#box2–border {
    box-sizing: border–box;
    width: 200px;
    padding: 10px;
    background–color: red;
}