There ain’t no fool like an old-school-fool.

Thanks to an old Tuts+ article by Jeffrey Way on how to inject Custom HTML and CSS into an iframe I have seen the light!

div {box-sizing: border-box;}

The implications for creating leaner HTML and CSS and for hacking my favourite big ole framework* are broad.

CSS tricks have written a good outline of the impact of box-sizing on the box-model and have called for International box-sizing Awareness Day.

One of the biggest causes of extraneous presentational markup in my HTML has always been due to wrangling with the box-model. Now – with this simple addition to your reset – borders and padding no longer affect an elements explicit width. Finally the crazy situation whereby it was impossible to simply create two 50% width boxes with borders and padding is resolved.

Can I use it? Yes I can.

*As of version 3 – yes, it’s been out for quite a while -Bootstrap is using this [old IE] box model.

 

 

 

Last updated on 5th September 2018