Changing border-box to content-box from parent to child

[vikramvi]

Parent div has got box-sizing border-box

Child svg has got box-sizing content-box

My queries are

• If parent has got border-box then does it get applied to all its child/children as well ?
• If not do I need to explicitly apply content-box to each of the child ?

Thanks,
Vikram

[lasjorg]

1. Check the docs, you can look at the “Inherited” part of the Formal definition.

2. Test it. Create a simple test, use the dev tools and look at the computed styles. You may have to check “Show all”.

If you want everything to inherit the box-sizing you can use this CSS.

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

Here is a css-tricks article as well.