Hacker News new | ask | show | jobs
by chrismorgan 1666 days ago
I’ll try framing and explaining it a slightly different way:

It’s about the difference between layout and content concerns.

Margin and padding should generally be layout concerns.

Explicitly-set width and height should generally be content concerns. This means it should exclude margin and padding, so content-box is the most appropriate model.

Before flexbox came along, it was necessary to use width and height for layout concerns quite extensively, which is why people started recommending border-box. But now, the root elements are pretty much the only places that may (or should) use width and height for layout concerns. So I say specify border-box for them if you need, but leave it at content-box everywhere else.

Just like gap (flex/grid/column) isn’t part of width or height—it’s a layout rather than content concern.

I’m saying that you’re thinking the wrong way: don’t try to squeeze your content into the layout, but define your content first of all and let the layout exist around it.

2 comments

Why should width and height be content concerns? Typically the measured width and height are the most important pieces of information needed by a layout engine.
Maybe height should be a content concern, but width? who makes websites expand horizontally in a content driven way?
Actually I’d say that height is seldom a content concern in horizontal writing modes; it’s width that’s the important one for content: think the width of a table column, you will choose the width based on the content (and not padding or gap between columns, which is a layout concern).