Box-sizing all elements in css

Question

What is the meaning of this code? Please explain why this has to be in my codes?

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

Have you actually tried doing any research? Like for example: https://www.w3schools.com/CSSref/css3_pr_box-sizing.asp No-one can tell you why it has to be in your code because no-one knows what your code looks like nor what you're trying to achieve if you don't tell us. — geoidesic, Apr 01 '18 at 18:28
More detailed description on what this reset is actually doing can be found here: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ Also an alternative that might be more consistent — Hunter McMillen, Apr 01 '18 at 18:33

score 1 · Accepted Answer · answered Apr 01 '18 at 18:31

It is ensuring that all elements plus all decorator elements inserted before or after elements will: include padding and border in the element's total width and height.

This is useful for example if you have javascript that needs to measure the size of an element and you want to make sure that measurement will always include padding and border widths.

Box-sizing all elements in css

1 Answers1