why should the box size in css be ignored instead of applying the reset to all elements?


html {
  box-sizing: border-box;

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

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.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top