css - Chrome開発者ツールで要素の計算されたサイズを見つける方法は?

Question

これは開発者ツールのインスペクターのどこかにあるはずですが、見つかりません。特定の要素 (div など) について、右クリックして [要素の検査] を選択した特定の要素の計算された寸法 (高さと幅) はどこにありますか?

Answer 1

開発者ツール パネルの下にあるリボンの要素名にカーソルを合わせるだけです。対応する要素がブラウザ ウィンドウで強調表示され、その隅に寸法が表示されます。また、開発者ツールの右側のペインを下にスクロールすると、計算されたディメンションとマージン、パディング、ボーダーなどを提供する「メトリック」ウィンドウが表示されます。

これは、SO の質問を保持する div のサイズのスクリーンショットです。下部の div 名にカーソルを合わせると、強調表示された領域の左下隅の寸法に注目してください。右側はメトリクス ウィンドウです。

大きな画像はこちら

今後の質問については、まず Google の素敵なドキュメントを参照してください。