Account Options

  1. Paul Irish
  2. 2
    Opening…
  3. Share…ShareShare…
    Opening…
  4. Paul Irish
    Paul Irish
    Paul Irish[email protected]
    1. Profile
    2. Google+
    3. Account settings
    4. Privacy
    Sign out

Google

google.com

Paul Irish

Paul Irish's profile photo
 -  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
 -  Bob Aman, Takeru Suzuki and 1 more
1 share  -  Steven Mautone
19 comments
Paul Irish's profile photo
13 Dec 2011  -  Edit   
Jeffrey Way's profile photo
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's profile photo
13 Dec 2011  -  Edit   
Jeffrey Way's profile photo
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's profile photo
13 Dec 2011  -  Edit   
Paul Irish's profile photo
Paul Irish  -  Hmm I think this'll require some spelunking in www-style archives.
13 Dec 2011  -  Edit   
Jeffrey Way's profile photo
Jeffrey Way  -  Yeah - searching through it right now.
13 Dec 2011   
Elliott Sprehn's profile photo
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's profile photo
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's profile photo
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)   
Jeffrey Way's profile photo
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's profile photo
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's profile photo
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's profile photo
Elliott Sprehn  -  Btw I'm pretty sure the Webkit Inspector has used * { -webkit-box-sizing: border-box; } for years.
13 Dec 2011   
Ingo Chao's profile photo
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's profile photo
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's profile photo
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's profile photo
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...
Send feedback