How to know the origin of greyed out CSS properties?
When a property is greyed out like 'height' in this case, I cannot find a way for the inspector to tell me where this is inherited from.
Is there any browser plugin or otherwise solution where it will always point me to the reason for the value?
Thanks in advance
2 Replies
That usually means it isn't coming from anywhere, but is more of a "default".
If I put a div and don't add any content, it will have a height of 0, even though I haven't declared anytyhing. If I add content, it will have a height, which is caused by the content that is inside that element, and not any declaration anywhere
Omg Kevin I hadn't received a notification that someone answered, and even the man himself! 🙏 🙏 🙏
Your explanation is excellent, and I wish it were somehow included or similarly signalled at inside the inspector. I can sort of see why it isn't though.
I will try to remember that in this case it's very likely the content itself that produces the value.
Further on defaults though, there are a lot of CSS defaults that are applied to the various HTML tags we know, that are mostly hidden. It would be so useful to have these always listed somewhere when inspecting an element.
Especially User Agent styling seems to interfere a lot here, and often causes me headache. I'll search if maybe you may have done a video on that.
Thanks so much again!