lara michaels lara michaels - 1 month ago 15
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.

SCREENSHOT #1:

enter image description here

SCREENSHOT #2:

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
Answer

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;

Comments