Как посмотреть вычисленные стили элемента

«Как посмотреть вычисленные стили элемента» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, можно. Даже если стили не заданы явно, браузер применяет к элементам стандартные (user agent) стили. Посмотреть их можно в инструментах разработчика (DevTools):

  1. В Chrome/Firefox: правой кнопкой → "Просмотреть код" → вкладка "Styles"
  2. Там будут видны все применённые стили, включая браузерные дефолтные

Пример:

<p>Простой текст</p>

Для этого <p> будут показаны стандартные margin, padding, font-size и другие свойства, которые браузер применяет по умолчанию.

Также можно получить стили через JavaScript:

const styles = window.getComputedStyle(element);
console.log(styles.margin); // покажет применённый margin