Hacker News new | ask | show | jobs
by JimDabell 1664 days ago
> 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.

2 comments

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.

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

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

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