Elucidating a bit more: there’s only a difference if you have border or padding, and I just find it increasingly rare for border-box to be in any way useful, because we’re generally separating layout.
Consider the row/column thing in Neat here: do you use margin on the children, or gap on the parent? Consensus is that gap on the parent is normally better: let the child be itself, and handle layout concerns at a higher level. That fits with why I say content-box is the better model for the web, the model that you should aim to think in terms of: treat border and padding as semantically part of a parent, automatically-sized component, and so if you are specifying your own dimensions, specify them relative to the content, because the border and padding are layout concerns.
Designers tend to prefer layout to lead content, because that’s what’s easiest for them. I prefer to have content lead layout, choosing dimensions to fit the content and letting the layout size itself around that.
All up, it’s still fairly nebulous, based around concepts and broad design patterns rather than concrete demonstrations, and that’s part of the reason I haven’t written it up more fully—I need to make a compelling case if I want to present it at all. (Another reason is that I just haven’t been doing any of them, really; my potential-blog-posts notes file has about 38 entries and 6,000 words, and I have another dozen or two drafts in my site, but I haven’t been focusing on that stuff recently.)
> border-box is about layout, content-box about content. You should aim to design things around content, not layout: leave layout to the parent.
> border-box is incompatible with ratios: you need content-box there.
> border-box is only actually useful for things like making body fill the viewport.
I get the contrarian thing, but this doesn't make a whole lot of sense.
Both border-box and content-box are about content; it's just a matter what's included or not in the width of a box. Sure, there's some truth about what designers expected, but they weren't the only ones who were confused about how a box's border and padding changed how content worked…
There's a reason why virtually every widely-used CSS framework starts by changing content-box to border-box.
It's one of those issues that if we could go back in a Time Machine, content-box would have been the default; this is the next best thing:
I’m aware of all the stuff. I just think (and have thought from the start) that it’s wrong and has missed the point, especially in a flex and grid world where (a) the difference should matter much less often, and (b) if the difference does matter, you could probably implement things better (in a way that would incidentally make the difference not matter).
If it bumps it up the queue at all: I’ve been wanting to read someone pitch this way of thinking for what feels like an age.
Personally, I went all in on border-box as agency work is always design-lead. When the work is “make this picture in css”, anything other than border-box will drive you insane.
But it’s been a few decades of us pushing responsive design, so I’m curious if content-box doesn’t have its merits. I still don’t quite grok it from your explanations here (though I will re-read them), so would love to read that essay.
—⁂—
border-box is about layout, content-box about content. You should aim to design things around content, not layout: leave layout to the parent.
border-box is incompatible with ratios: you need content-box there.
border-box is only actually useful for things like making body fill the viewport.
See also what I wrote in https://news.ycombinator.com/item?id=29357636
—⁂—
Elucidating a bit more: there’s only a difference if you have border or padding, and I just find it increasingly rare for border-box to be in any way useful, because we’re generally separating layout.
Consider the row/column thing in Neat here: do you use margin on the children, or gap on the parent? Consensus is that gap on the parent is normally better: let the child be itself, and handle layout concerns at a higher level. That fits with why I say content-box is the better model for the web, the model that you should aim to think in terms of: treat border and padding as semantically part of a parent, automatically-sized component, and so if you are specifying your own dimensions, specify them relative to the content, because the border and padding are layout concerns.
Designers tend to prefer layout to lead content, because that’s what’s easiest for them. I prefer to have content lead layout, choosing dimensions to fit the content and letting the layout size itself around that.
All up, it’s still fairly nebulous, based around concepts and broad design patterns rather than concrete demonstrations, and that’s part of the reason I haven’t written it up more fully—I need to make a compelling case if I want to present it at all. (Another reason is that I just haven’t been doing any of them, really; my potential-blog-posts notes file has about 38 entries and 6,000 words, and I have another dozen or two drafts in my site, but I haven’t been focusing on that stuff recently.)