Consider `box-sizing: inherit` instead of `box-sizing: content-box`

[battaglr]

Current situation

Among other styles, in the code-base we can find:

hr {
  box-sizing: content-box;
}

input[type="search"] {
  box-sizing: content-box;
}

The use of border-box as "default" box-sizing in a lot of projects is rather common, usually using some variation of the code popularised by @paulirish:

*,
*::before,
*::after {
  box-sizing: border-box;
}

The problem with this, is that since the specificity of * is [0,0,0,0], it will not override the box-sizing value of the hr –[0,0,0,1]– or the input[type="search"] –[0,0,1,1]–, and to accomplish consistency you must add these selectors to the code shown above, or something more specific like:

input[type="search"] {
  box-sizing: border-box;
}

Suggestion

By replacing box-sizing: content-box with box-sizing: inherit we'll:

• Inherit the default box-sizing that is content-box in almost every browser, and accomplish the same results that we get using content-box.
• Allow an easy way to modify the box-sizing using current common techniques, without having to consider these specific cases.

The code will look something like:

hr {
  box-sizing: inherit;
}

input[type="search"] {
  box-sizing: inherit;
}

What do you think, @necolas? I'll be glad to do a PR if you want to add this.

Test

You can test this on different browsers using this fiddle.

---

I can't help thinking that I must be missing something, since this seems like something nobody had suggested here before, and the box-sizing value has been the topic of many opened issues.

[xPaw]

:+1: I had to remove box-sizing resets in normalize.css in one of my projects due to this exact reason.

[Mottie]

@battaglr There is an updated recommendation in Paul Irish's blog:

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

[battaglr]

@Mottie: hi, thanks! I'm aware of that, but I didn't want to focus the issue on the different ways to modify the box-sizing, just on presenting a way to make it easier —regardless the techique— while using normalize. What do you think about the proposed modifications?

[Mottie]

In my opinion, I think setting the box-sizing to inherit would not "normalize" the setting across all browsers as is the intent of normalize.css.

I really think it should be pushing forward and use the above css to start using border-box as the default; and remove all the other internal box-sizing tweaks.

[battaglr]

setting the box-sizing to inherit would not "normalize" the setting across all browsers

Why would you say that? It clearly does normalize —at least to the extent that it's doing it now— the box-sizing of the hr and input[type="search"] —have you seen the fiddle I shared above?— since all browsers that I have knowledge of have content-box as default box model.

I really think it should be pushing forward and use the above css to start using border-box as the default

That has been discussed many times before, e.g.: #409. Anyhow, I also intend to push forward the use of border-box as default box model, but since in this project that's not going to happen —and I think it's the right choice; at least for the time being— I believe that my suggestion will make it easier to use it for all of us without compromising the project's intent. :)

[Effeilo]

If we do not change the calculation of the model box dimensions before normalize, make heritable box-sizing is a problem when using the element in a parent element defined with another box-sizing. He will inherit his box-sizing, which is not necessarily desired

http://jsfiddle.net/jc7ecfp8/11/

[battaglr]

@Effeilo: changing the box-sizing before or after normalize —if we use inherit in both cases— will have the same effect. I agree with you: "is not necessarily desired", that's a drawback, and you could argue the same of any property set to inherit, like normalize.css#L257-L258. But how often people would be toying with the box model making this a common issue? Anyhow, if you —or anybody— have a better way of accomplishing the same: I'm on board. :smiley:

[Effeilo]

@battaglr from my point of view, if we modify the box model for all elements, the best solution is to remove box sizing for hr and input [type = "search"] because they become useless. In my opinion, normalize is modular and must be adapted to the project.

[battaglr]

@Effeilo: I was just writing an update of my previous comment.

I realized that in my previous comment I haven't considered the occasional tweak of border-box to accomplish a particular thing, but not modifying it "globally". That's a really serious problem, that would justify alone to close this issue.

I was certainly missing something. Thanks for your feedback.