Вопрос №55174 от пользователя Kirill Kozedub в проекте «Портал «Music Box»»

Nikita Mikhaylov

Здравствуйте

К тому же на макетах данные отступы даже не равны между собой: вверху - 61px и 74px, а внизу - 40px и 48px (см. картинку) или я чего-то не понимаю?

Ориентируйтесь именно по тем значениям, которые есть в шагах. В ближайшее время ещё раз пройдусь по всему макету на предмет таких микро-отступов. Спасибо за наводку.

Поясните, пожалуйста, а в каких целях необходимо давать отступы для footer'а в относительных величинах:

В шагах были и другие относительные единицы :) Вы можете использовать те, которые вам удобны. В данном случае я показываю, как идёт соотношение шрифта и отступов. Вы всегда можете перевести в абсолютные значения. В тестах с этим проблем не будет

Kirill Kozedub

Никита, добрый день!

Меня уже просто бомбит от от этих отступов! Вот то что получается на тестах. В тестах ровно те же отступы, что и на макете в фигме:

Но ведь если отступы заданы в rem то они считаются от размера шрифта, который задан в теге html. Я могу допустить, что я что-то напутал и неправильно указан неправильно указан базовый размер шрифта, но отступ сверху и снизу не может быть разным, если он рассчитывается от базового значения!

Nikita Mikhaylov

А на гитхабе сейчас актуальная версия? Там в артефактах футера уже не вижу

Kirill Kozedub

Запилил для демонстрации отдельную ветку на гитхабе.

Вот код, который тесты прошел в ветке main.

А вот код, который тесты не проходит в ветке footer-demo.

Кстати, тот код, который ниже комментария //Only for automatic tests пришлось добавить тоже исключительно ради тестов, т.к. у меня на мобильной версии ссылки не растягивалась на всю ширину страницы, как того требовали тесты, хотя визуально все было ОК:)

Nikita Mikhaylov

Вот теперь понял всю ошибку, которая у нас произошла. Именно в вашем случае указание в пикселях действительно правильны по простой причине: использование сброса стилей, которые изначально не предполагались. Вы использовали причём самый хардкорный путь — reset.css. Изначально берутся многие стандартные стили, и именно из-за этого пошли такие несхождения.

Выкидывать ресет естественно не надо, так как это переделка проекта, но стоит иметь этот момент в виду

Kirill Kozedub

Спасибо за пояснение. На каком-то этапе я сам так и подумал, что многие отклонения могут быть из-за сброса стилей, пробовал даже его выкидывать при отладке, но в том месте - это не помогло и я оставил, как есть. А в реальной разработке сейчас что лучше: использовать reset.css или нет? Или лучше использовать Normalize.css?

Kirill Kozedub

Хотя стоп! А как в данном случае reset.css влияет на отступы в футере? Ведь если отступы задаем в rem, в любом случае они будут одинаковыми, т.к. ссылаются на один и тот же размер шрифта в html. Это же не em, который ссылается на размер родительского элемента или как мы с Вами обсуждали в испытании Футуристический плакат может ссылаться на стандартные стили.

3*rem* = 3*rem*, а в проекте, что в макете, что в тестах отступы в верхней части футера сверху и снизу не равны друг другу! Так все таки причина в reset.css или это ошибка в макете и тестах?

Nikita Mikhaylov

Хотя стоп! А как в данном случае reset.css влияет на отступы в футере?

Суть в сбрасывании других отступов. Например, верхнего внешнего отступа у заголовка. Ведь, в конечном счёте, это всё тоже повлияет на итоговую высоту родительского элемента. Поэтому я и предлагаю пользоваться абсолютными значениями.