> 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

> 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: html { box-sizing: border-box } *, *::before, *::after { box-sizing: inherit } References From 2012, which started it all: https://www.paulirish.com/2012/box-sizing-border-box-ftw/ https://www.paulirish.com/2012/box-sizing-border-box-ftw/ Developers are so psyched, border-box has a holiday: "International box-sizing Awareness Day"—https://css-tricks.com/international-box-sizing-awareness-day/ https://css-tricks.com/international-box-sizing-awareness-da... CSS Tricks almanac: https://css-tricks.com/almanac/properties/b/box-sizing/ https://css-tricks.com/almanac/properties/b/box-sizing/