[ollerac]

I ran into so many issues with content-box a decade back I never thought about it again and always defaulted to border-box.

I think it's absurd that I can set a div to a specific width (100px, 200px, whatever) and the padding or border will make the div larger than that width.

It makes it so hard to think about designing a page when you have to continuously add together padding, margin, and border with the width to get the actual width.

You're right about flexbox and grid solving most of these issues -- and responsive design has pretty much done away with using exact pixel widths for anything, but I still run into some cases (especially around creating grid layouts that automatically reflow) where CSS columns and floats are the best approach (not often, but it still happens...) and then you need to rely on the width being the actual width, you know?

[chrismorgan]

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]

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.

[visarga]

Maybe height should be a content concern, but width? who makes websites expand horizontally in a content driven way?

[chrismorgan]

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

[JimDabell]

> I think it's absurd that I can set a div to a specific width (100px, 200px, whatever) and the padding or border will make the div larger than that width.

That’s not what’s happening.

Imagine you have a physical box. The contents are 10cm wide. There is padding of 2cm on each side. And the space around the box is 3cm. How wide is the box? It’s not 10cm; it’s 14cm.

When you say:

> I can set a div to a specific width

…you aren’t setting the width of the div, you are setting the width of its contents. That’s why the property value is box-sizing: content-box – because you are setting the width of the content.

If you’re setting the width of the content when you mean to set the width of the box, then no wonder it’s not doing what you want.

[noahtallen]

I don’t think this is a great analogy. Margin is the space around a physical box. The border is the edge of the box, like a piece of wood. The padding is the space inside the box separating the content from the box itself. And then the content is its own thing.

How big is the box? I think most would measure from border to border. I think it’s easier to think of CSS in that way.

[JimDabell]

> How big is the box? I think most would measure from border to border.

Again, you’re not understanding what’s happening here. You’re right – the measurement of the box is from border to border. That’s completely correct! But the width you are setting is the width of the content, not the width of the box. Pointing at the width of the box and saying that it’s not the width you set is looking at it completely wrong. You didn’t set the width of the box. You set the width of the content.

[chrismorgan]

… and there are plenty of types of real-world containers that are defined by what they can contain, by their internal rather than external dimensions. Especially capacity in litres.

Take bicycle tyres. The most popular naming scheme in Australia approximates the external diameter in inches, which is objectively problematic. The technically vastly superior naming scheme endorsed by ISO measures the rim diameter, which is the far more important measurement for determining compatibility, in millimetres. As it stands, each inch measurement corresponds to at least two incompatible sizes, depending on the tyre’s width: for example, 16″ tyres are normally 305mm (e.g. 16×2¼″), but there’s also the rarer 349mm (e.g. 16×1⅜″) commonly used in recumbents.

[simongr3dal]

Then the property should have been called `content-width` and not `width`.