Box-Sizing property in CSS3

by Hough on April 21, 2011

Giving padding and border in some box which is having some fix amount of width and height is always a bit of headache for HTML coder. In this case border and padding adds up their size to whole width and height of the box and make it bigger. So, coder has to minus the padding and border size to make the box of correct width and height.

For example, let’s say we have one <div> which has 200px of height and 100px of width. Let’s give padding of 30px for each side. Let’s see what happens.

Test box.

If, you can measure out above box you’ll find that, it actually has, 260px width and 160px of height. That padding of 30px has been added up to the actual size of this ‘<div>’.

Now, in CSS3 one interesting property called, box-sizing has been introduced to overcome this issue. What it does is, it prevents size of padding or border from adding up to the size of element. Here is the code to make this thing work across all major browsers.

div.rounder{
        padding: 30px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

Above code will not include padding of, 30px to the width and height of our layer. And output will be something like this

Test box.

So, it’s gr8. And without any nasty calculation we can achieve nice result.

This property is supported by : IE8+, Safari 3.1+ , Firefox 3+, Opera 9.6+, Chrome 2+

Leave a Comment

Previous post:

Next post: