I think that using box-sizing: inherit;’ can be bad. If you do this, and decide to change box-sizing on an element, all of that elements children will also have their box-sizing changed.
Unless you are sure you want that to happen, it’s probably best just to use ‘box-sizing: border-box;’ to ensure that all elements use ‘border-box’. If any elements need a different box-sizing, you would override it with more specificity.
I think that using box-sizing: inherit;’ can be bad. If you do this, and decide to change box-sizing on an element, all of that elements children will also have their box-sizing changed.
Unless you are sure you want that to happen, it’s probably best just to use ‘box-sizing: border-box;’ to ensure that all elements use ‘border-box’. If any elements need a different box-sizing, you would override it with more specificity.
Yeah indeed, things can get messy in this case.
I was a
box-sizing: inherit;
person, then I realised this is super useful:It means that when the screen is less than 1240px wide, it will have a 20px gap down either side of the screen with no need for media queries.
This technique doesn't work with
box-sizing: inherit;
though.