
* { box-sizing: border-box } FTW - tambourine_man
http://paulirish.com/2012/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.

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

~~~
rquantz
Prior to IE6 it worked this way all the time. That's why quirks mode was there
in later versions.

------
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_

~~~
AUmrysh
I don't know what I did, but after I doodled a bit and scrolled the page
around using the middle mouse button, this youtube video popped up over the
page: <http://www.youtube.com/watch?v=E6x_-xKl-Fg>

Also the konami code makes the same sort of unicorns appear that were on the
video.

~~~
jakelear
Drawing a star causes the video to appear.

~~~
tambourine_man
I tried drawing every kind of star I know but couldn't get any video to show.

~~~
mdda
You have to draw the (5 pointed) star from the bottom left - like this :
<http://depts.washington.edu/aimgroup/proj/dollar/>

------
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>

~~~
shocks
Thanks for the code, it's awesome fun to play with. :)

------
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?

~~~
robgibbons
Using your analogy, if I have to transport an item, and I want to pad it
sufficiently, I should be looking for a bigger box. Not trying to shrink the
item.

------
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.

~~~
tomjen3
Firefox canvas performance is a joke. You should upgrade to Chrome.

~~~
cdr
Firefox (10, linux) performance is fine for me; it may be his browser version
or something else.

~~~
morsch
Works fine on my own machine (13, Linux). But that doesn't help people who are
stuck on machines where it doesn't. I suppose the code could detect low frame
rates and reduce quality or shut down?

------
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.

~~~
jenius
Yeah same, found it like 3 days ago and was like thank god. I'm going to
create a fix for IE7, whether it's a polyfill or sass wizardry, and I'll make
a post about it when I do. Easy fluid responsive layouts for all!

------
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...](http://personal.x-istence.com/post/2010/04/25/css-3-needs-be-adopted-
now)

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

~~~
54mf
Right, exactly, and in a complex layout that adds a significant amount of
extra markup. Not to mention trying to find which of the 4 or 5 columns is the
one that's breaking the width of their container and causing the last column
to break below the rest. It works, and has worked for me for a long time, but
it's a hack.

~~~
cleverjake
oh, without a doubt. I kissed the earth when I found that IE 8 supported
border-box, my point was just that there were hacks around the issue before
now.

------
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.

~~~
mladenkovacevic
Hey for some reason I can't add your Google Reader Frontend feed collections
to my subscriptions. Clicking on the "Subscribe" buttons doesn't produce any
result. Win XP and Chrome here.

------
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.

~~~
troels
Maybe forcing the browser into quirks mode would do the trick?

------
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...](http://stackoverflow.com/questions/8421533/how-to-obtain-ctrl-
behavior-on-a-browser-using-javascript)

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. :)

~~~
monsterix
Thanks a lot Paul.

I have learned a lot from your work on Boiler Plate, HTML5 and Modernizr. Let
me dig deep into zooming and come up with its results.

------
creatom
Your background is just awesome! :D

------
agscala
Will this work with older browsers? Where can I expect support for this?

~~~
daleharvey
The article explains that in full

(everying apart from <=ie7)

~~~
davej
Could you not just trigger quirks mode in IE6 and IE7 to get the old box
model, or is border-box different to the old microsoft box model?

~~~
kilburn
The old microsoft box model was basically this one, but the implementation was
so full of bugs that it ended up being "test and change until it shows the way
you want".

There are even lists compiling those bugs, such as
<http://www.positioniseverything.net/explorer.html>

------
themstheones
The W3C box model spec forms a set of consistent rules that make sense. It's
not the spec that's wrong. Just because it doesn't fit with your original
intuition doesn't make it wrong.

~~~
kbolino
The W3C box model would only be useful if the W3C also provided a way to
specify a width as "percentage of parent box width minus a fixed number of
units" to compensate for the padding adding to the total width.

However, they did not, which means that in order to make a decent flowing
layout, you have to change your document markup to insert artificial and
otherwise unnecessary elements (DIV tags usually).

Thus the original model was flawed, did not make sense, and ultimately was not
consistent with their own stated goals (separation of content and style).

[edit: FWIW petenixey said essentially the same thing, and what's really
clever is that he said it first.]

~~~
bzbarsky
At this point the W3C is in fact working on providing such a thing. "width:
calc(50% - 20px)".

Works in Firefox and IE. At some point WebKit will catch up, I assume.

~~~
kbolino
I'm glad to hear that, but it's long overdue and the border-box model already
solves the same problem with less markup (and most importantly, without
creating an implicit dependency between the padding and width styles).

~~~
bzbarsky
Well, in all fairness calc() lets you solve a bunch of problems that border-
box can't solve.

