Bye Bye CSS Box Model…

Introduction

As some of you may know, one of the main building blocks of learning HTML + CSS is the Box-model.

The Box-model is a sum of element size (content + padding + borders) and there is the margins that is out side of the element.

A lot of people break their heads when calculating the sum of content + padding + border of an element . and don’t forget every change in width + padding + border, need recalculation.

In the history of IE, when standards weren't so common, old IE’s versions were working differently than current implementation of the box-model. For example given an element who has width:200px + padding:10px (every side) + border 10px (every side) the element overall size was 200px, contrary to this modern days which the result would be 240px.

And if you think’s about it, it’s really much easier in the nonstandard way.

Meet box-sizing

In CSS3 we were introduced with a new property called Box-sizing, it has 3 optional values content-box(default), padding-box, border-box. (only 2 works fully in all browsers, but the 2 options that is working, are the most important.)

Box-sizing — values

1. content-box(default) — element width doesn't include padding and border.

div#test{ 
box-sizing:content-box;
width:200px;
padding:20px;
border:20px solid red;
}

2. padding-box(only FireFox) — element width include padding and doesn't include border.

div#test{ 
box-sizing:padding-box;
width:200px;
padding:20px;
border:20px solid red;
}

3. border-box — element width includes padding and borders.

div#test{ 
box-sizing:border-box;
width:200px;
padding:20px;
border:20px solid red;
}

This is a screenshot from my example to show all differences between all options — Watch Example (note: only Firefox support padding-box)

Pros and Cons

To my opinion border-box is the most intuitive for most beginner developers and my solve a lot of frustration, A lot of newbies developers get confused in setting & calculating different width across all elements of the DOM, when using the box-model.

The issues, is that you need to get used to it and it’s support from IE8 and above, quite good.

How To Work With It? (Reset All Elements to Border-Box)

In this new perception, the best way is to reset all elements in page, you just need to add this styles to the reset page:

CSS — reset style-sheet

*{ -moz-box-sizing:border-box; box-sizing:border-box; }

This will make all your elements to behave in the “new box-model”, more accurate is to call it the “border-box method”.

I saw websites that use it little different, and reset the pseudo element :before and :after too, like in this example:

CSS — reset style-sheet

*, *:after, *:before { 
-webkit-box-sizing: border-box;
/*unnecessary in new webkit browsers */
  -moz-box-sizing: border-box;
/*unnecessary in new Firefox browsers */
 box-sizing: border-box;
}

It’s make sense, it the same idea, It does not matter what you choose, It just important that you understand this new concept.

Maybe, not far from now the box-model will be belongs to the past, and people will talk about, how we worked in such strangest way.

Support

  • Work in all browsers the values content-box and border-box.
  • padding-box, works only in Firefox.
  • IE — works from IE8 and above.

That’s all, I hope you enjoy it.

Elad Shechter.

Originally published at coderwall.com by me, on June 4,2013

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.