Что можно увидеть в браузере по стилям кроме самих стилей

В браузере можно увидеть:

1. Вычисленные стили (Computed) - итоговые значения всех CSS-свойств, применённых к элементу после каскада, наследования и всех преобразований.

2. Модель отображения (Box Model) - визуализацию margin, padding, border и content элемента.

3. Фильтры - активные CSS-фильтры (blur, contrast и др.).

4. Анимации - список активных анимаций и их параметры.

5. Шрифты - информацию о загруженных шрифтах.

6. Медиа-запросы - список всех медиа-правил и их текущий статус (активны/неактивны).

Пример в DevTools:

/* Исходный CSS */
.box {
  padding: 10px;
  margin: 20px;
  border: 1px solid red;
}

В Computed будет показано:

• padding: 10px (все стороны)
• margin: 20px (все стороны)
• border: 1px solid rgb(255, 0, 0)