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.

take a look at [this](https://css-tricks.com/box-sizing/#universal-box-sizing-with-inheritance) if you wish to have both `border-box` reset and `box-sizing` customization. — Asef Hossini, Oct 12 '21 at 09:00

score 57 · Accepted Answer · edited Mar 16 '16 at 10:17

57

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

edited Mar 16 '16 at 10:17

Bakudan

19,134
9
53
73

answered Oct 12 '12 at 17:03

VKen

4,964
4
31
43

2

Thanks for the pointer. I had to apply it to few more child elements and it worked. – Gokul Kav Oct 12 '12 at 22:48
1

Thank you! This helped me on the new Bootstrap 3 allowing me to integrate Bootstrap with an existing (non-Bootstrap) site. – Drew Anderson Sep 20 '13 at 09:29
1

@GokulKav i am facing same issue what else changes did u make ? they may be helpful for me – Abdul Baig Apr 08 '14 at 11:48
Even though Chrome devtools says it is applying the style, and even though I applied it to all children using `.elem *, .elem *::after, .elem *::before`, and even trying `!important`, it still wouldn't make a difference until I literally duplicated the selector that originally applied it, as `* {box-sizing: content-box;}` and hit all possible elements with that, apparently. – GG2 Jan 19 '22 at 00:34

score 8 · Answer 2 · answered Aug 21 '15 at 11:57

I had a similar problem with bootstrap and I did override the box-sizing CSS property for <a> like this,

a *,
a *:before,
a *:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

Customize it for your need.

score 8 · Answer 3 · edited Jan 24 '17 at 10:11

8

you can use

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

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

edited Jan 24 '17 at 10:11

Alan Płócieniak

103
6

answered Oct 31 '15 at 07:22

user5371360

81
1
2

score -5 · Answer 4 · answered Jun 25 '15 at 06:59

-5

Override like this:

* {
box-sizing: border-box!important;
}

answered Jun 25 '15 at 06:59

mfralou

826
6
5

1

I wanted to remove border-box. not add importance to border-box. – Gokul Kav Jun 25 '15 at 17:57

Removing inherited property of an element (box-sizing)

4 Answers4