A Look Into: CSS3 Box-sizing
Not so long time ago, when we create a box in a web page, let’s say with a div
, we specify 100px
for both the width and the height, followed by padding
for 10px
and borders of about 10px
as well.
div { width: 100px; height: 100px; padding: 10px; border: 10px solid #eaeaea; }
The browsers will expand the box’s size to 140px, where this amount 140px of the total width/height is made up of the addition of the padding
and the borders
as follows; 100px [width/height] + (2 x 10px [padding]) + (2 x 10px [border]).
However, sometimes this result is not what we expect it to be. Sometimes, we need the box to always be 100px
regardless of the padding or the borders added.
To overcome such a recurrent problem when creating web page layout, we can use the CSS3 box-sizing
property to control how the CSS box model should work in the browsers.
Using box-sizing
The box-sizing
property has two value options, first the content-box
; which is the default value, when using this value the box model will behave as we have described above.
And the second one is border-box
, where the box’s size will be calculated by substracting the specified content’s size with the padding and the borders added.
div { width: 100px; height: 100px; padding: 10px; border: 10px solid #eaeaea; box-sizing: border-box; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ }
For instance, when we have a box like what we have described above (100px square with 10 pixels for the padding and the borders), the content’s size will decrease to 60px
, and the total size of the box remains 100px
, where the equation of the subtraction can be described as follows; 100px [width/height] – ((2 x 10px [padding]) + (2 x 10px [border])).
Browser Support
The box-sizing
property is supported in all browsers; Firefox 3.6+, Safari 3, Opera 8.5+ and Internet Explorer 8 and above.
So, if you know that most of your visitors will not be using Internet Explorer versions below 8, you can use this useful recommendation (thanks to Paul Irish).
* { box-sizing: border-box; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ }
The snippet above will apply the box-sizing
property to all the elements on your web page.
Example
In this section, we will show you a real-life example on how we can make use of this box-sizing
property. We will create a simple navigation, based on the HTML markup below, with five link menu in it.
<ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul>
Then, we will add some decorative styles; such as, set the navigation’s fix width for 500px
and the link’s width for 100px each, then inline the list item, and give different backgrounds for each link menu, so you can see the difference between them.
nav { width: 500px; margin: 50px auto 0; height: 50px; } nav ul { padding: 0; margin: 0; } nav li { float: left; } nav a { display: inline-block; width: 100px; height: 100%; background-color: #ccc; color: #555; text-decoration: none; font-family: Arial, sans-serif; font-size: 12pt; line-height: 300%; text-align: center; } nav a { display: inline-block; width: 100px; height: 100%; color: #555; text-decoration: none; font-family: Arial, sans-serif; } nav li:nth-child(1) a { background-color: #E9E9E9; border-left: 0; } nav li:nth-child(2) a { background-color: #E4E4E4; } nav li:nth-child(3) a { background-color: #DFDFDF; } nav li:nth-child(4) a { background-color: #D9D9D9; } nav li:nth-child(5) a { background-color: #D4D4D4; border-right: 0; }
At this point, our navigation just looks normal.
However, the problem will come when we add left or right borders to the link menu.
nav a { border-left: 1px solid #aaa; border-right: 1px solid #f3f3f3; }
The menu will overflow to the bottom, as the link’s width is no longer 100px
. It is now 102px
, causing the navigation’s total width to be 10px
longer then we have specified above (500px
).
To overcome this issue, we need to apply the box-sizing
property, as follows:
nav a { border-left: 1px solid #aaa; border-right: 1px solid #f3f3f3; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
Further Reading
And finally, if you are the adventurous type, and want to dig deeper into this subject, we have put together a few selected references for you:
- Understanding the CSS Box Model – Tech Republic
- Box-sizing bug in Firefox – BugZilla
- Box-sizing FTW – Paul Irish
Related posts:
- A Look Into: CSS3 :First-Of-Type Structural Selector
- How to Create Gmail logo with CSS3
- Keeping Your CSS3 Code Markup Slim
- Coding a Graceful Breadcrumb Navigation Menu in CSS3
via hongkiat.com http://www.hongkiat.com/blog/css3-box-sizing/