To apply border-box in all css rules

Question

According to this article, we should follow this approach:

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

But I think that this it's more correct:

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

Because * includes html, and pseudo-elements are preceded by ::, not : that correspond to pseudo-classes.

Am I applying properly the rule to the whole document? I don't want to use content-box nowhere.

Answer 1

Let me clear the answer,

The earliest box-sizing: border-box; reset looked like this:

   * {
  box-sizing: border-box;
}

This works fairly well, but it leaves out pseudo elements, which can lead to some unexpected results. A revised reset that covers pseudo elements quickly emerged:

Universal Box Sizing

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

This method selected pseudo elements as well, improving the normalizing effect of border-box. But, the * selector makes it difficult for developers to use content-box or padding-box elsewhere in the CSS. Which brings us to the current frontrunner for best practice:

If it solve your problem , kindly Vote Up to acknowledge Community Combine time and help. If you have any question feel free to ask. Thank You.