Привет! Хочу разобрать одну из самых популярных ошибок начинающих веб-разработки.
Начну с предыстории: каждый элемент, созданный в html-документе имеет встроенные свойства. Например, текст имеет изначально заранее заданный браузером размер и стиль, блоки - расположение и отступы. Многие не придают этому должного значения, пока не начнутся проблемы с расположением.
Давайте на примере рассмотрим пример. На примере был создан такой блок с текстом:
Верхняя полоса - это нижняя часть адреса страницы. Вы можете заметить, что существует некоторый отступ слева и сверху. Это и есть заранее заданный браузером параметр отображения. С одной стороны, это не проблема, если вы создаете что-то для тестирования своих знаний, но с другой стороны - проблема, если вы, например, выполняете заказ pixel perfect. Итак, как же исправить такую проблему?
Существует специальный способ убрать изначальные параметры элементов. Универсальным решением является 3 команды, которые вы можете увидеть ниже:
Рассмотрим данные команды по порядку.
margin - отступ элемента от других элементов и границ документа. Здесь установлено значение 0, это значит, что мы устанавливаем изначально значение без наружного отступа.
padding - отступ внутрь от границ элемента. И здесь установлено значение 0, тем самым мы убираем это свойство у элемента.
box-sizing: border-box - данное свойство делает так, чтобы размеры границ и внутренних отступов элемента были включены в его общую ширину и длину. Это обеспечит исключение нежданных сдвигов и нарушения позиционирования.
Теперь рассмотрим селектор. Селектор "*" позволяет обратиться ко всем элементам. То есть, все, что вы укажите тут, будет указано у всех элементов страницы.
Важно: обращение к универсальному селектору * должно располагаться в самом верху документа css, именно тогда свойство будет применено ко всем элементам
Такие команды называют обнулением, или же сбросом стилей в css.
Посмотрим результат выполнения этих команд:
Как видим, отступ пропал, и текст расположен ровно в углу без отступов.
Также важно знать, что если вы собираетесь создавать крупный проект, разумным решение сброс стилей зафиксировать в отдельном документе css.
Рекомендую для закрепления материала опробовать обнуление на любом своем ранее созданном проекте, а также изучить, какие свойства изначально установлены у основных тэгов html.