2 ms·
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 generall
by chrismorgan 5y 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.
- rp1 5y agoWhy 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.
- visarga 5y agoMaybe height should be a content concern, but width? who makes websites expand horizontally in a content driven way?
- chrismorgan 5y agoActually 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).