(2) Paul Irish - Google+ - box-sizing: border-box; ...is clearly superior to our…

Paul Irish

Paul Irish - 13 Dec 2011 - Extended circles

box-sizing: border-box;

...is clearly superior to our standard box model. I'm very curious about using ` * { box-sizing: border-box; } ` on all sites supporting IE8+. But I don't know if any edgecase issues have been uncovered. Anybody know?

meanwhile I'm testing..Edit

- Comment - Hang out - Share

Translate

- Bob Aman, Takeru Suzuki and 1 more

1 share - Steven Mautone

19 comments

Paul Irish - Looks like <button>, checkbox, radio, submit, reset, and search input are border-box by default. Everything else is content-box.

Only tested Chrome. I wonder what IE8 reports via currentStyle.

My testpage: dl.dropbox.com/u/39519/box-sizing-elements.html

13 Dec 2011 - Edit

Jeffrey Way - I'm glad to hear you say that. I've always felt that it was a better approach. Just thought I wasn't smart enough to realize the benefits of the current box model.

13 Dec 2011

Paul Irish - PPK hates the w3c box model too: http://www.quirksmode.org/css/box.html#link3
There is little value to it, IMO. Haven't seen any cases where it'd be preferable.

13 Dec 2011 - Edit

Jeffrey Way - I'd love to find the discussions about this in the archives. In the IE 5 days, what group of people decided that this alternate approach was preferable to IE's method.

13 Dec 2011 (edited)

Paul Irish - I blame Bert! :)
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug footnotes appear to have some good links.

13 Dec 2011 - Edit

Paul Irish - Hmm I think this'll require some spelunking in www-style archives.

13 Dec 2011 - Edit

Jeffrey Way - Yeah - searching through it right now.

13 Dec 2011

Elliott Sprehn - It wouldn't surprise me at all if this was related to type setting, and laying out documents in a print like way. You know the size of your font, and you know the content needs to be X width to preserve the type setting, wrapping, and placement you desire. Now you don't have to worry about spacing inside or around the box, or even a border changing the way the text is placed. The border-box model makes less sense there: "Oh crap, I added a border now my text wraps!".

For applications where you want everything to be more elastic (and really for documents on the web) it doesn't make as much sense.

13 Dec 2011 (edited)

Paul Irish - Maybe so.
Though for two column text, it's mighty nice to say 50% wide columns, with 15px of inner padding. (and maybe a 1px right border on the first as a divider)

13 Dec 2011 - Edit

Elliott Sprehn - Yeah it is. I wonder if they envisioned that as being solved better with multi column layout properties. Another case where the content-box makes more sense is ensuring a background image is completely visible. If the content box keeps getting smaller because of borders you lose the edges of the image and it's really nice to say width: 200px where the image really is 200px wide.

13 Dec 2011 (edited)

Translate

Jeffrey Way - There certainly were benefits to the standards version, but, ultimately, I think the switch has made designers' lives more difficult.

13 Dec 2011

Jeffrey Way - When grids started becoming cool (like with 960.gs), you ended up having to use all of these nested divs to apply padding to each grid column. It's awful. With the IE version, it's a cinch.

13 Dec 2011

Elliott Sprehn - Yeah, I definitely think IE's model is superior. I was more addressing Paul's comment about not knowing cases where it'd be preferable.

13 Dec 2011

Elliott Sprehn - Btw I'm pretty sure the Webkit Inspector has used * { -webkit-box-sizing: border-box; } for years.

13 Dec 2011

Paul Irish - http://www.google.com/codesearch/p#OAMlx_jo-ck/src/chrome/tools/test/reference_build/chrome_linux/resources/inspector/devTools.css&q=box-sizing%20%20lang:%5Ecss$&exact_package=chromium&type=cs&l=670

Truth!

I think that's actually what got me onto this track

13 Dec 2011 (edited) - Edit

Ingo Chao - "The subject of which layout model makes more 'sense' has raged for years now and shows no sign of ever being settled."
http://www.ericmeyeroncss.com/bonus/render-mode.html
(bonus material for an old book)
The background given in the wikipedia article seems plausible:
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
which makes a connection between how the the css1 box model was crafted and how the padding is added to the cell width in HTML3
-- but I don't know if the article is correct.

14 Dec 2011 (edited)

Peter Gasston - I'm not sure it's "clearly superior"; I think it's maybe about equal when you're dealing with only length values of the same unit, but inferior when you're mixing units.

As we have the option to switch between box models with box-sizing, then may as well have as the default the one that says the content box is the size you state as the width, and the border and padding are extra to that. Makes more logical sense to me.

14 Dec 2011

Paul Irish - I found someone that's had a few projects with this rule.. Asked him about his experience.. His response was encouraging:

> We've been using *{box-sizing: border-box;} in one of my projects (deployed in production, averaging over 1M visits a month) at work for about a year now, and it seems to be holding up just fine. The project has been tested in IE8 & 9 and the latests Firefox and Chrome versions and we've had no problems as of yet (we don't officially support Opera, but I expect it to work just fine there too). All jQuery (+UI) offset calculations and animations run fine, even in any element we've displayed as inline-block. As of late we've started testing the project on mobile devices (iPhone, iPad and Android) and we've had no issues regarding box-sizing with any of them yet, so it seems to work just fine.

14 Dec 2011 - Edit

Nicolas Gallagher - Yeah, ever since IE8 came out with support for `box-sizing` we've been waiting until IE6/7 have negligible market share. I'm not sure how useful a global reset of the box model is going to be, but it's definitely useful for fluid components at the moment.

15 Dec 2011

Add a comment...

Account Options

Google

Search

Paul Irish