Сброс всех отступов в документе

Как вы уже видели, некоторые теги в HTML документе имеют уже встроенные стандартные стили. Как, например, у параграфа <p> есть отступы сверху и снизу. А заголовки <h> имеют не только отступы, но и размер шрифта, которые отличается от всего остального текста в документе.

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

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

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

Мы видим, что сейчас у заголовков и параграфов есть отступы не только сверху и снизу, но и слева. Изображение так же имеет больший отступ слева, как и список. Все это встроенные стандартные стили - мы их не задавали.

Как мы уже знаем, стили мы задаем в файле CSS. Откройте в VS Code файл style.css для вашей статьи. Напомню, что он лежит в папке "css"

Ранее в этом файле мы прописали цвет бэкграунда background-color: lightgray; .

Сейчас мы посмотрим какие существуют варианты сброса отступов, а далее будем применять нужный именно нам:

  1. Прописать через * новые значения для внешних и внутренних отступов (margin, padding). Так как мы хотим сбросить имеющиеся значения нам нужно поставить отступы ноль пикселей.

    Вот что получится при таких параметрах

    Метод переназначения стилей через * не совсем корректен в данном случае, так как * в CSS обращается абсолютно ко всем элементам, даже если у них нет стандартных встроенных стилей. Что загружает систему, так как браузер будет последовательно проходить по всем элементам и обнулять стили даже там, где этого делать не нужно. И если в нашем случае с довольно простым кодом это никак не повлияет на загрузку страницы, то в большом проекте, такие действия не желательны.

  2. Есть еще один вариант для сброса всех встроенных стандартных стилей. Такой файл называют reset.css и в нем прописывают все параметры для сброса. Отступов, размеров заголовков, обозначений для списков и тд. Но прописывать все эти параметры руками не очень удобно, всегда есть шанс что-то упустить или убрать слишком много. Подробно не будем останавливаться на этом методе, так как использовать его в своей практике мы не будем. Просто знайте, что существует такая возможность полностью сбросить все стили прописывая код руками в отдельном файле reset.
  3. Третий способ, который мы будем использовать для сброса стандартных встроенных стилей - normalize.css
    Это уже готовый файл, который вы можете скачать и применять к своим проектам. Просто смотрите самую последнюю версию, она будет учитывать все новые фишки браузеров и облегчит вам работу со стилизацией кода.
    Сейчас последняя версия v8.0.1
    Скачать можно на сайте https://necolas.github.io/normalize.css/
    Для того чтобы применить сброс стилей создайте в папке со статьей про Lego файл normalize.css (не забудьте, что файлы .css лежат у нас в соответствующей папке).

    Откройте файл normalize.css в VS Code
    Нажмите на сайте кнопку Download и скопируйте весь текст, который есть в браузере (для выделения всего текста используйте горячие клавиши Win + A).
    Вставьте скопированный текст в файл normalize.css и сохраните изменения.