Is box sizing inherited if declared inside universal selector?

Question

Does this get applied by every element?

EXAMPLE 'A':

*
{
    box-sizing: border-box;
}

I thought box-sizing is not inherited?

This is in regards to box sizing reset:

EXAMPLE 'B':

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

html
{
    box-sizing: border-box;
}

Will both examples have the same effect?

Answer 1

I thought box-sizing is not inherited?

No, it's not. You can check the specification and you will see that inherited is NO. In the example A, you are simply using the universal selector to select all the elements and applying box-sizing:border-box to them but it doesn't target pseudo element so they will not have box-sizing:border-box set by default.

Will both examples have the same effect?

No they won't. Even if we consider that it's the only CSS applied to your document, the example B will also target pseudo element to make them inherit the box-sizing and if we follow the parent-child structure they will logically get box-sizing:border-box since html is having box-sizing:border-box.

The other difference is that using inherit will consider the parent style unlike explicitly setting the value in the example A. In the example A, you have to change box-sizing for each element if you want to override the one set by your code while in the example B, changing box-sizing on the element OR any ancestor will override the code you are using.

---

A basic example to illustrate the difference.

Using A:

* {
  box-sizing: border-box;
}



/* my code*/
body {
  box-sizing: content-box;
}
.box {
  width:100px;
  height:100px;
  border:10px solid;
  padding:10px;
}

p {
  padding:5px;
  border:2px solid red;
}

<div class="box">
  <p></p>
</div>

Using B:

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

html {
  box-sizing: border-box;
}


/* my code*/

body {
  box-sizing: content-box;
}

.box {
  width: 100px;
  height: 100px;
  border: 10px solid;
  padding: 10px;
}

p {
  padding: 5px;
  border: 2px solid red;
}

<div class="box">
  <p></p>
</div>