Вычисленные стили и инспектор блочной модели

В Chrome DevTools → Элементы → на вкладке вычисленных стилей отображается итоговое вычисленное значение каждого свойства CSS выбранного элемента после применения каскада, наследования и разрешения специфичности. Она отвечает на вопрос «что фактически применено?», а не «что было записано?»

Панель вычисленных стилей отображает интерактивную диаграмму блочной модели с размерами содержимого, внутренних отступов, границы и внешних отступов выбранного элемента. Щёлкните любое значение размера, чтобы выделить задавшее его правило CSS и перейти к панели стилей.

Введите запрос в поле фильтра, чтобы быстро найти нужные вычисленные свойства. Установите флажок «Показать все», чтобы включить унаследованные свойства и свойства браузера по умолчанию. Снимите его, чтобы отображались только свойства, отличающиеся от значений по умолчанию, — это самый короткий путь к применённым стилям, имеющим значение.

Свойства, отображаемые серым цветом на панели вычисленных стилей, унаследованы от родительского элемента. Щёлкните унаследованное свойство, чтобы перейти к элементу и правилу, которые его задали, и проследить каскад без ручной проверки родителей в разметке.

Запись margin: 16px 8px раскрывается в четыре вычисленных значения: margin-top, margin-right, margin-bottom, margin-left. На панели вычисленных стилей всегда отображаются отдельные полные свойства, что полезно при отладке несимметричных проблем с отступами.

Вычисленные значения цветов всегда имеют формат rgb() или rgba(), независимо от того, как они были записаны. Щёлкните образец цвета на панели стилей, чтобы переключить формат отображения (hex, hsl, rgb). На панели вычисленных стилей всегда отображается разрешённый цвет.

Проверьте вычисленные значения font-size, font-family, line-height и letter-spacing, чтобы убедиться в правильном применении типографических параметров. Резервные шрифты браузера отображаются в вычисленном font-family, если не удалось загрузить запрошенный шрифт.

box-sizing: border-box включает внутренние отступы и границу в ширину; box-sizing: content-box (значение по умолчанию) исключает их. Диаграмма блочной модели в DevTools отражает применяемую модель: сравните ширину содержимого с общей шириной, чтобы проверить поведение box-sizing.

Вертикальные внешние отступы между блочными элементами схлопываются до большего из двух значений. Диаграмма блочной модели показывает фактический внешний отступ; используйте её вместе с инспектором компоновки, чтобы выявить схлопнувшиеся отступы, отличающиеся от записанных значений.

Панель стилей показывает все правила, применимые к элементу, в порядке специфичности. Перечёркнутые правила переопределены. Чтобы определить, какое правило выигрывает при конфликте свойств, найдите самое верхнее неперечёркнутое объявление на панели стилей.

Правила таблицы стилей агента пользователя браузера отображаются в нижней части панели стилей с пометкой «таблица стилей агента пользователя». На панели вычисленных стилей показаны их разрешённые значения. Сбросьте их с помощью сброса CSS или Normalize.css, чтобы задать единообразную начальную основу для всех браузеров.

Что показывает панель вычисленных стилей такого, чего не показывает панель стилей?

Панель вычисленных стилей и диаграмма блочной модели раскрывают итоговые разрешённые значения всех свойств CSS после применения каскада. Используйте их для отслеживания наследования, отладки раскрытия сокращённых свойств, исследования box-sizing и определения правила, выигрывающего в конфликтах специфичности для любого элемента.