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