2016-11-03 1 views
2

Firefoxの開発ツールを初めて使用しています。この計算されたCSS値をFirefoxのインスペクタでトレースする方法は?

私はこれまで、特定の要素の高さをオーバーライドできなかった理由を理解しようとしています。このページではブートストラップが使用されていますが、私の質問はこの特定の問題とは関係ありません。「ルール」と「計算済み」ペインの情報に基づいて、どのように問題が診断されたか理解したいと思います。

この要素の高さを20ピクセルに設定しようとしていますが、計算された高さが90ピクセルのまま90ピクセル(下のスクリーンショットの2行目)のままです。

スクリーンショット#1:

enter image description here

スクリーンショット#2:

enter image description here

質問:私は何が起こっているかを把握するために、Firefoxのインスペクタを使用することができますどのようにここに?この90pxの値がどのように導出されているか把握するにはどうすればよいですか?

コード要素の内部:

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

PS:!私はそう依存CSSを書いていない重要な、私はここで何が起こっているのか把握しようとしています。

+0

その特定の要素にそのCSS値を付けるフレームワークを使用していますか?それはhtmlコード自体の一部ですか?それは '.css'ファイルで追加されたように見えないので、私はそれがこれらの2つのオプションのいずれかでなければならないと推測しています。 –

+1

[一部の読書資料](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS)しかし、参考のために、「要素」はインラインで書かれたことを意味します。 – pol

+0

アンカータグの中身は何ですか? – connexo

答えて

3

インライン要素の高さは、その内容によって厳密に設定されます。 display: inline-block;をアンカーに追加してあなたのことを尊重しますheight: 20px;

関連する問題