These Darn Boxes

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

content-box(200px)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus sem ac lorem rutrum vestibulum. Maecenas eget tempor metus. Vivamus mollis ligula eget nisl porta pretium.
#box1–content {
    box-sizing: content–box;
    width: 200px;
    padding: 10px;
    background-color: red;
}
Total width= 220px: Content=200px: Content–Box–Model (current implication by W3C and all major browser vendors)

Border-Box

border-box(200px)Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rhoncus sem ac lorem rutrum vestibulum. Maecenas eget tempor metus. Vivamus mollis ligula eget nisl porta pretium.
#box2–border {
    box-sizing: border–box;
    width: 200px;
    padding: 10px;
    background–color: red;
}
Total width=200px; Content =180px: Border–Box–Model. As you will see the border-box measures the total width edge to edge and subtracts the padding, border and margin to give us the width of the content inside and not the other way around like the content-box does for us.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

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

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

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>

Comment Preview

  1. John Doe shouted this comment preview:
    2011/04/09