Home arrow Style Sheets arrow Using the box-sizing CSS3 Property
STYLE SHEETS

Using the box-sizing CSS3 Property


Without a doubt, the host of new properties included with CSS3 are great at creating appealing and eye-catching features on web pages. Even though the specification suffers from some well-known browser incompatibilities, it’s still possible to create image-less rounded corners, add native shadows to text and boxes and even animate HTML elements without having to turn to JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
September 01, 2011

print this article
SEARCH DEVARTICLES

Without a doubt, the host of new properties included with CSS3 are great at creating appealing and eye-catching features on web pages. Even though the specification suffers from some well-known browser incompatibilities, it’s still possible to create image-less rounded corners, add native shadows to text and boxes and even animate HTML elements without having to turn to JavaScript.

While all of these things are quite impressive, you’re probably wondering if the functionality provided by the new standard extends its arms beyond the mentioned facilities. In reality, CSS3 includes a somewhat underrated “gem”, called “box-sizing”, which allows you to control the box model that will be applied to a selected web page element.

Put in simpler terms, “box-sizing” will permit you to specify if the padding assigned to the pertaining element will be added to its overall width and height, or if it won’t affect the element’s dimensions at all.

As usual, the most effective way to grasp the logic behind the “box-sizing” property is by means of concrete, testable code samples. In line with this concept, in this two-part tutorial, I’ll be creating a few, which will demonstrate how simple it is to put the property to work for you.
     
Taking the First Step: Building a Basic Web Page

As I expressed at the beginning of this article, the best manner to understand how the “box-sizing” property does its thing is by example. Thus, the first step that I’m going to take will consist of creating a trivial web page, which will include a couple of divs. With these elements ready to be tested, I’ll show you how easy it is to control the way that they’ll render their box model.

Having explained that, here’s how this sample web page looks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the box-sizing CSS3 property</title>
</head>
<body>
<div id="wrapper">
    <h1>Using the box-sizing CSS3 property</h1>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div> 
</div>
</body>
</html>

As seen above, the structure of this sample HTML document has nothing especially interesting, as it only defines the pair of divs previously mentioned, which have been assigned as a still undefined class called “container”. With this basic markup already up and running, it’s time to put the “box-sizing” property into action!

To do so, I’m going to add to the document a set of styles, which will look like this:   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the box-sizing CSS3 property (with a content-box value)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
}
.container {
    width: 320px;
    padding: 20px;
    margin-bottom: 20px;
    background: #FFF1EA;
    border: 2px solid #FF8F59;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Using the box-sizing CSS3 property (with a content-box value)</h1>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div> 
</div>
</body>
</html>

Now things are becoming a bit more interesting. As the above code fragment shows, the sample divs have been given a fixed width of 320px along with a padding of 20px. While this process is actually pretty boring, you should pay attention to the use of the “box-sizing” property, which in this case takes the value “content-box”.

But what does this mean? When used with the aforementioned value, the property will render the default box model, or expressed in other words, it will append the padding to the width assigned to the divs (certainly a wrong implementation, but one that has been followed by most browser vendors for a long time). Moreover, if you test the previous web page on your browser, you should get an outcome similar to this:

The final width assigned to the target elements will be 360px (the initial 320px, plus a padding of 20px), which is exactly the same result that would be obtained by default, even without appealing to the functionality of the “box-sizing” property. So, what’s point in using it? In fact, there’s no need to be so harsh in our judgments, as the property allows us to apply the “correct” box model - that is the one that maintains the dimensions of an HTML element untouched, regardless of the padding assigned to it.

If you’re wondering how this can be accomplished, in the following section I’ll be amending the prior example, which this time will apply the previously mentioned box model to the same target divs.

Tweaking the Box Model: Using the “box-sizing” Property with the “border-box” Value

In the preceding section, you learned how to use the “box-sizing” property in a somewhat “redundant” fashion (if the term is really applicable in this case), as it didn’t generate any impact in the box model applied to the target divs. However, where the properly really shines in all its splendor is when it’s assigned the value “border-box”. But, what’s so special about it?

In this situation, the model box rendered by the selected elements will be the standard one - that is the one that respects the dimensions given to the elements in question, regardless of the padding that they might have or not.

Again, an example is worth a thousands words; so here’s one that reveals the actual functionality of “box-sizing”. Have a look at it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the box-sizing CSS3 property (with a border-box value)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
}
.container {
    width: 320px;
    padding: 20px;
    margin-bottom: 20px;
    background: #FFF1EA;
    border: 2px solid #FF8F59;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Using the box-sizing CSS3 property (with a border-box value)</h1>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div> 
</div>
</body>
</html>

Although at first sight, this example looks nearly identical to the one created in the previous section, this time the “box-sizing” property has been assigned the value “border-box”. This simple change produces a powerful effect, since now the width of the target divs will remain the same, despite having a padding of 20px. And if you want a concrete proof of my claim, just give the example a shot. If all goes well, the divs should be rendered in the following way:

There you have it. Thanks to the work that “box-sizing does behind the scenes, now it’s possible to create HTML elements that neatly adhere to the standard box model. Not too bad, considering that the whole process only required to assign the value “border-box” to the pertinent property and nothing else.

Naturally, it’s feasible to implement this approach with selectors that have been given a height as well. Nevertheless, the details regarding this use case will be covered in depth in the upcoming post.

Closing Remarks

In this first part of this two-part tutorial, I went through the development of a couple of basic examples, which demonstrated the remarkable functionality that the “box-sizing” CSS3 property brings to the table, and how you can exploit it for controlling the box model that will be applied to elements on a web page.

In the set of code samples that you just saw, the property was used with containers with a fixed width. It’s possible, though, to utilize it with elements that have been assigned a fixed height as well and obtain the same pleasing results. Given that, in the last installment I’ll be covering this common use case, so you can extend even further your background on the goodies that “box-sizing” offers for free.

Don’t miss the final part!  


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Style Sheets Tutorials
More By Alejandro Gervasio


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials