Chromeの以前のバージョンでは、開発者ツールを使用してページ要素を検査でき、それらを青で強調表示していました。 Chromeの最近のバージョンでは、要素が青で強調表示されていますが、緑とオレンジの領域もあります。
色はどういう意味ですか?
色は CSSボックスモデル に対応する要素の領域を表します。
(オレンジと赤の同様の色合いの選択はおそらく最良ではありません。)
これは、開発者ツール(デフォルトでは非表示)のMetricsセクションで確認できます。
CSSボックスモデルパラメータ(content/padding/border/margin)。
公式ドキュメント: ページとスタイルの検査と編集:ボックスモデルのパラメーターの調査と編集