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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

CSS & HTML Expert

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store