Removing inherited property of an element (box-sizing)

Question

I am using a jQuery light box plugin on a bootstrap site. It has box-sizing: border-box set via universal selector.

* {     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;     box-sizing: border-box; } 

The light box div does not appear right because of this (sometimes a vertical scrollbar appears). Once we remove this through web inspector it appears ok. Is there any way to remove the box-sizing property of this particular element. box-sizing:'' or box-sizing:none does not appear to work.

Answer 1

The box-sizing^{msdn, mdn} CSS property default is box-sizing: content-box;. Have you tried to use it to override the inherited style?

Answer 2

you can use

*:not(.classname){   box-sizing : border-box; } 

classname will be the class of element you want to exclude from the universal selector.