Why height property in Chrome Developer Tool is greyed out

Question

When I use Chrome Developer Tool to inspect an element, the height property is greyed out. From here

https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/#live-edit-a-do-node

it means i can't edit it.

But my question is why I can't edit it? And how can I find out which style in style set this property? With other properties, I can expand it? but for this greyed out one? I can't expand it.

Answer 1

This is typically caused by the user agent style-sheet. You can override this usually by reordering your CSS or with a CSS normalizer (like normalize.css or reset.css, though these can add unnecessary bloat to your code if you don't need all of it).

It is important to note the order in which your style-sheets are invoked because CSS is by definition, cascading and the lowest definitions will take precedence.

In brute force situations, and only when there are no other clear solutions, you can use !important declarations.