Chrome開発者ツールのハイライト色とは何ですか？

Chromeの過去のバージョンでは、開発者ツールを使用してページ要素を検査し、それらを青で強調表示することができました。Chromeの最近のバージョンでは、要素が青で強調表示されますが、緑とオレンジの領域もあります。

色の意味は何ですか？

色は、CSS box-modelに対応する要素の領域を表します。

• 青はコンテンツです
• 緑はパディングです
• オレンジはボーダーです
• 赤はマージンです

（オレンジと赤の同様の色合いの選択はおそらく最良ではありません。）

これは、開発者ツールの[ メトリック]セクションで確認できます（デフォルトでは非表示になっています）。

CSSボックスモデルのパラメーター（content / padding / border / margin）。

公式ドキュメント：ページとスタイルの調査と編集：ボックスモデルパラメーターの調査と編集