International box-sizing Awareness Day

cardboard box2

Details

On February 1st, CSS-Tricks will declare "International box-sizing Awareness Day", in order to promote awareness of the humble yet powerful 'box-sizing' CSS property, an essential part of any designers repertoire. If you don't know about it, you should!  Here it is, in all of it's glory:

*, *:before, *:after {  -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;}

In essence, it overrides the old-fashioned, default rendering behaviour of not including padding and border sizes in the dimensions of elements on the page.  For example, without the CSS above, a box of width 200px, with a border of 5px and padding of 15px, will actually render as 240px wide.  These makes the process of cutting markup and CSS more tedious and difficult.  With this simple CSS rule, that box will stay as 200px wide including padding and borders.

At Praxis Interactive, we use this neat CSS on pretty much every site we make these days, as it allows for designs to be more quickly and accurately translated from the graphic design phase to actual web site markup.

You can read more about "International box-sizing Awareness Day" at CSS-Tricks.

Tagged with

Share This Page

Keep Updated

Latest Tweet

Contact

Phone

Fax

+61 2 6169 4766

Email

Post

PO Box 1393
Woden ACT 2606
Australia