lara michaels lara michaels - 4 months ago 50
CSS Question

how to trace this computed CSS value in firefox inspector?

I am new to using Firefox's developer tools.

I am trying to make sense of why I have so far been unable to override the height of a given element. This page uses Bootstrap, but my question is not related to this particular issue: I want to understand how, based on the information in the "Rules" and "Computed" panes, I could have diagnosed what the issue is.

I am trying to set this element's height to 20px, but it remains at 90px (as shown in the second screenshot below) computed height of 90px.


enter image description here


enter image description here

QUESTION: How can I use Firefox's Inspector to figure out what is going on here? How can I use it to figure out how this value of 90px is being derived?

Code inside the element:

<span class="lang_pt" style="display: none;">O que fazemos</span>
<span class="lang_en" style="display: inline;">What we do</span>

PS: I don't write CSS so reliant on !important, I am trying to figure out what is happening here.

Pat Pat

The height of an inline element is set strictly by its contents. Add display: inline-block; to the anchor so it will respect your height: 20px;