* { box-sizing: border-box } FTW

[tambourine_man]

As it's been said in the comments, it's amazing that after years of lobbying IE to change its box model to match W3C, we realize that maybe IE's model made more sense after all.

[masklinn]

> it's amazing that after years of lobbying IE to change its box model to match W3C, we realize that maybe IE's model made more sense after all.

Not really. Everybody I've known (in about a decade) has felt the IE box model made more sense.

But here's the thing: it wasn't the standard, the standard was not going to change its default box model, and dealing with a single slightly worse box model would always be better than dealing with two completely different box models.

box-sizing is the alternative, and a pretty good one. But I don't think anyone ever read about the differences between the W3C box model and the MSIE box model and thought "wow, the W3C box model makes so much more sense".

[talmand]

I've felt for years that the "broken" IE model made more sense. Your element has a height and width, padding pushes inward against interior content and margin pushes outward against exterior content.

Glad to see others think this too, I always thought it was just me.

[agscala]

People were lobbying for IE to change in order to make it consistent with the rest of the browsers, not necessarily because it was worse.

[rplnt]

I think IE worked this way only if there was no DOCTYPE. Or am I mistaking this with some other IE "bug"?

[yuhong]

FYI: http://hsivonen.iki.fi/almost-precedent/

[josscrowcroft]

This article was an eye-opener - I write CSS all the damn time and hadn't even clocked box-sizing yet.

I don't wanna know how many hours I've spent calculating widths-after-padding(-but-wait-it's-different-on-both-sides) and commenting the CSS so other developers know why this element is width: 169px even though the container is 200px...

Not to mention:

    textarea { width:100%; padding:20px; oh shit. }

[mikepurvis]

Wow, yeah. For years I've been using the container-div idiom, where the outer one sets the width, and the inner one imposes border and padding against a width: auto.

This may take some getting used to.

[RyanMcGreal]

I can't tell you how much I enjoyed doodling in the margins while I read that article.

[zerd]

What article?

doodling

[shocks]

Because I know we all wanted it.

http://jsfiddle.net/gSD94/2/ http://jsfiddle.net/gSD94/2/embedded/result/

(great article too!)

edit: better link (fullscreen!)

[paulirish]

Nice work. I talked about the effect back at http://paulirish.com/2010/my-harmonious-background-canvas/

And the equivalent code is available on Github: https://github.com/paulirish/harmony

[josscrowcroft]

To those wondering:

Harmony procedural drawing tool, by mrdoob: http://mrdoob.com/projects/harmony/

dollar recognizer project (draw a star on paul's background!): http://depts.washington.edu/aimgroup/proj/dollar/

inspired by paul's site's implementation, about a year ago, i made a proof of concept captcha thing ("motioncaptcha"): http://www.josscrowcroft.com/demos/motioncaptcha/

[jhummel]

As I pointed out on twitter http://twitter.com/#!/jhummel/status/169561232045649921 it seems that the * selector doesn't apply to pseudo elements. If you're going to take this route it might be a good idea to include *, ::after, ::before { box-sizing: border-box } to make sure everything is being sized the same.

[robgibbons]

Where the traditional box model starts to make sense is with fixed-size elements, such as images. Adding padding to an element shouldn't alter the dimensions of the contents within the element.

[kilburn]

Yes it should. If you don't want that space to be from within the element, then you should be setting a margin, not a padding.

Box analogy: when you add foam padding to a box to protect its content, are you effectively widening the box or reducing the volume it can fit?

[funkah]

Good point. Maybe the best thing then is to add a rule for "img" or maybe ".fixed-size" with "box-sizing: content-box" right after after the "*" rule.

[nostradamnit]

I didn't read the article, but love the mouse effects outside of the content area :D

[morsch]

The Firefox on my work desktop (7, Linux) slows to a crawl on that site, I suspect it's because of the doodle effect. Annoying gimmick, sorry.

[fein]

I read the article, then proceeded to waste another 20 mins of my works time drawing phallic images in the sidebars.

Still, very cool trick, and the drawing is incredibly smooth.

[jenius]

I love you Paul Irish. I was just complaining about this exact same issue about 3 days ago and when I found this article I was like YES HE AGREES WITH ME!

Especially when dealing with fluid layouts, this guy is a lifesaver

[joshuahedlund]

Yes, trying to do fluid layouts with percents and borders is a huge pain without this. Too bad it doesn't work with IE7 as I'm still seeing about 5% market share from there. But at least it's declining fast.

Weird timing - after years of coding I literally found this box-sizing solution today on SO just a couple hours before seeing it here on HN.

[aridiculous]

Good god, it's about time this hits the mainstream dev community.

The W3C box model is IMO one of the worst design flaws in front-end dev. It's a model that doesn't follow that of a real box! When you have padding (stuffed newspaper, peanuts, etc) in a packing box, the actual width and height of the box doesn't change! Border-width(or the thickness of the cardboard) is also included in the box dimensions.

I've only heard very weak reasons in the past for the W3C version and I'm surprised we haven't gotten past it. I think border-box will become more important as we head towards cross-platform responsively designed apps and sites with tons of layout decisions to consider. With simple sites up until now, you could afford the loss of control or the cognitive overhead to figure out workarounds. But now, I don't want to think the unintuitive way every time I'm making a layout decision for different screens.

[antidaily]

I've found border-box to be especially helpful with mobile layouts. I can set the width of my text inputs to 100% and not worry about weird side-scrolling breakage. And of course save time by not having to specify widths for the inputs. or max-widths or whatever.

[X-Istence]

I wrote about the same CSS with a small plea that CSS 3 be ratified and implemented across all browsers as quickly as possible:

http://personal.x-istence.com/post/2010/04/25/css-3-needs-be...

I was working on my portfolio site (link in my profile) and was frustrated with the CSS layout rules. It makes a lot more sense (at least to me) for the way it works with box-sizing: border-box than what it was previously.

If I were not afraid of having my portfolio site also easily accessible by HR in various different companies (many still with IE 6) I'd have used the experimental tags. Instead I used a work-around.

[rradu]

Somewhat related is the ability to do calculations in CSS3, allowing you, for example, to subtract pixels from percentages.

http://www.w3.org/TR/css3-values/#calc

[54mf]

Incredible. I wish someone had told me this a few years ago, would have saved me a ton of grief. Jeremy Keith said it best in the comments: "box-sizing: border-box is the bee's knees."

[cleverjake]

The way I have been getting around this until the last year or so was just double wrapping divs. Setting a wrapper to have the width you want with 0 margin and padding, and then assigning the padding and margin you want to the inner div does essentially the same thing

[kemayo]

Well, if you'd found out about it a few years ago you'd plausibly still have felt an obligation to support IE7, and thus been unable to use it.

[md224]

Just wait until you discover Flexbox!

[conradfr]

And all those years I was wondering if I was stupid to think that.

I'm eager to use it, but as I use Bootstrap I imagine it breaks it ?

[grey413]

Not as badly as you might think! Playing around with the new box model on a test site and on the bootstrap site (via firebug), I only found four noticeable changes in appearance:

- The search form was noticeably shorter and more cramped. I fixed this by adding height: 100% to the interior text input element

- Text inputs are less wide than they should be when you use bootstrap's span classes

- The navbar's vertical and horizontal dividers disappeared. I fixed this by adding 1px of padding to either the side or bottom of the divider, as the case required.

- Side tabs are a less wide than they should be

[vegardx]

Was I the only one that for some reason got a Youtube-video that all of a sudden popped up and started playing a short video about ESPN being hacked or something?

Might have been a glitch of some sort, but I'd suggest OP should check his source code to see if he hasn't been compromised of some sort.

[paulirish]

omg hacked! Nah it's cool. I wired that up. The unicorns konami trigger that was featured in the video was introduced by my blog so it's a bit of an homage or something. Thxthx.

[troels]

Not having IE7 support is a pretty nasty limitation though, if you're developing a commercial web site.

[ars]

I wonder if anyone wrote an IE .htc script to ix this dynamically.

[atacrawl]

I worked on a project recently where the previous designer did this and it was absolutely maddening. Switching the box model can be useful sometimes, but it makes no sense to me why you would do this globally.

[voyou]

My initial thought is that it only makes sense to do it globally. Two different box models in the same page - now that would be maddening.

[beggi]

I wonder how well this works with Bootstrap?

[bjeanes]

TIL about calc()

<3

[monsterix]

Paul is there an answer to this: http://stackoverflow.com/questions/8421533/how-to-obtain-ctr...

You'll know, so I am asking it here. Or is it even a right question in the first place?

[paulirish]

Answered you on SO. :)