Blog » International box-sizing Awareness Day

International box-sizing Awareness Day

Blog » International box-sizing Awareness Day

International box-sizing Awareness Day

Posted on 31 January 2014 in Development Process
cardboard box2

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.