Comment tracer cette valeur CSS calculée dans l'inspecteur firefox ?

Question

J'utilise pour la première fois les outils de développement de Firefox.

J'essaie de comprendre pourquoi je n'ai pas réussi jusqu'à présent à modifier la hauteur d'un élément donné. Cette page utilise Bootstrap, mais ma question n'est pas liée à ce problème particulier : Je souhaite comprendre comment, sur la base des informations contenues dans les volets "Rules" et "Computed", j'aurais pu diagnostiquer le problème.

J'essaie de fixer la hauteur de cet élément à 20px, mais il reste à 90px (comme le montre la deuxième capture d'écran ci-dessous), avec une hauteur calculée de 90px.

SCREENSHOT #1 :

SCREENSHOT #2 :

QUESTION : Comment puis-je utiliser l'inspecteur de Firefox pour comprendre ce qui se passe ici ? Comment puis-je l'utiliser pour comprendre comment cette valeur de 90px est dérivée ?

Code à l'intérieur de l'élément :

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

PS : Je n'écris pas de CSS qui dépendent de !important, j'essaie de comprendre ce qui se passe ici.

Answer 1

La hauteur d'un élément en ligne est strictement déterminée par son contenu. Ajouter display: inline-block; à l'ancre pour qu'elle respecte votre height: 20px;