Why inherit the box sizing css reset than apply it directly to all elements?

user_6293348 0
Viewed 1531

I've seen this box-sizing CSS reset trick in a tutorial and I've read a little about it but I don't see why it's done in this way than just applied to the universal selector. For instance, why this way:

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

instead of just setting the border-box property on the second section and removing the html selector, in theory it should do the same thing if I understand it right. Every selector and pseudo element would have the border-box property applied to it.

border css html
1 Answers

What

html {
  box-sizing: border-box;
}

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

is saying is that html element has box-sizing: border-box and that all elements are then going to inherit the box-sizing of their parent.

So, if you like 'to begin with' every element inherits box-sizing from html's setting because no one has told it anything different.

But supposing you have somewhere

.mydiv {
  box-sizing: content-box;
}

with HTML

<div class="mydiv">
  <header>some text...
  </header>
</div>

what do you expect the box-sizing of the header element to be?

What setting the inherits above is saying is 'I expect header to inherit its box-sizing from its parent' and that is content-box.

If we'd had everything set to border-box at the start it would not be inheriting, it would use what it had been set at, border-box.

user_108674540
Related