Chrome 개발자 도구 하이라이트 색상은 무엇입니까?

이전 버전의 Chrome에서는 개발자 도구를 사용하여 페이지 요소를 검사 할 수 있었으며 파란색으로 강조 표시했습니다. 최신 Chrome 버전은 요소를 파란색으로 강조 표시하지만 녹색 및 주황색 영역도 있습니다.

색깔은 무엇을 의미합니까?

색상은 CSS box-model에 해당하는 요소 영역을 나타냅니다 .

• 파란색은 내용이다
• 녹색은 패딩입니다
• 주황색은 테두리입니다
• 빨간색은 마진

(오렌지와 빨강의 비슷한 음영을 선택하는 것이 가장 좋지 않을 수 있습니다.)

개발자 도구 의 메트릭 섹션 에서이를 확인할 수 있습니다 (기본적으로 숨겨져 있음).

CSS 박스 모델 파라미터 (content / padding / border / margin).

공식 문서 : 페이지 및 스타일 검사 및 편집 : 상자 모델 매개 변수 검사 및 편집