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

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

  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.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.