CSS3 box-sizing property
Recently I had to use the
box-sizing property… and every time I needed to search
on Internet for the correct usages. So, last time this happened I’ve decided to write a post
about it, with the hope this help me memorize it - or at least next time I can google for myself 🙂
Until a few years ago, when you assigned an element a ruleset like the following, you got a square with size 120 pixel.
So, in case you absolutely want the padding, and a squared box of 100 pixel, the only solution was to change the css rules to something like:
box-sizing to the rescue
To avoid this mess, CSS3 introduced the
How does it work? Look at this demo:
Both the rectangles have the same CSS class box, to which are applied the following rules:
The rectangles are different for the only fact that, at the second rectangle is applied
box-sizing CSS property.
This forces the browser to render the rectangle with the specified width and height, and place the border and padding inside the box.
Currently there are three possible values for the box-sizing property:
content-box: the default behavior; the box has the width and height specified, and eventually the border and the padding are outside the specified width and height.
border-box: force the browser to render border, and padding inside the specified width and height.
inherit: the value is inherited from the parent node.
Are you thinking at the support of the browsers?
Having Can I use… as reference, I can say that the support of the browser is not too bad after all.