Что означает код * {

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Разберём код по частям — сначала про селектор *, затем про каждое свойство.

Селектор *

* — это универсальный селектор (universal selector) в CSS. Он применяет заданные стили ко всем элементам на веб‑странице — от <html> и <body> до <div>, <p>, <span> и любых других тегов.

Использование * в начале блока стилей — распространённый приём для сброса стандартных отступов и унификации расчётов размеров элементов перед началом вёрстки.

Разбор свойств

1. margin: 0;

   Убирает внешние отступы (margin) у всех элементов.

   Зачем это нужно: браузеры автоматически добавляют небольшие отступы некоторым элементам (например, <body>, заголовкам <h1>–<h6>, спискам <ul>/<ol>). Это может привести к появлению неожиданного пространства вокруг элементов и нарушить задуманный макет. Установка margin: 0 «обнуляет» эти отступы.

2. padding: 0;

   Убирает внутренние отступы (padding) у всех элементов.

   Зачем это нужно: аналогично margin, некоторые элементы могут иметь предустановленные внутренние отступы. Обнуление padding даёт полный контроль над пространством внутри элементов с самого начала.

3. box-sizing: border-box;

   Меняет алгоритм расчёта ширины и высоты элемента.

   По умолчанию (box-sizing: content-box):

   • Ширина (width) и высота (height) задают размер только содержимого элемента.

   • padding и border добавляются поверх указанной ширины/высоты.

   С border-box:

   • Указанная ширина (width) включает в себя: содержимое + padding + border.

   • Добавление padding или border не увеличивает итоговую ширину элемента.

   Пример:

   .element {
     width: 200px;
     padding: 20px;
     border: 5px solid black;
     box-sizing: border-box;
   }

   Итоговая ширина элемента останется 200 px, а пространство для содержимого уменьшится до 150 px (200 px − 20 px слева − 20 px справа − 5 px граница слева − 5 px граница справа).

   Зачем это нужно: значительно упрощает вёрстку, особенно адаптивную. Вы можете задать элементу width: 100%, и он гарантированно впишется в родительский контейнер, даже если у него есть отступы или рамка.

Итог: зачем используют этот блок кода?

Этот фрагмент — часть так называемого CSS Reset или Normalize. Его цель:

• Унифицировать отображение страницы в разных браузерах (устранить предустановленные стили браузеров).

• Упростить расчёты размеров элементов за счёт box-sizing: border-box.

• Создать чистую отправную точку для вёрстки без неожиданных отступов.

Где обычно размещается: в самом начале основного CSS‑файла проекта, до всех остальных стилей.