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

Kirill Kozedub

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

Вертикальный отступ у верхней части футера: по 3rem

Вертикальный отступ у нижней части футера: по 2rem

Нигде у нас относительные единицы не использовались, вроде бы, а тут под конец - пожалуйста...

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

8 0

Nikita Mikhaylov

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

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

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

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

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

0

Kirill Kozedub

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

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

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

0

Nikita Mikhaylov

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

0

Kirill Kozedub

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

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

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

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

0

Nikita Mikhaylov

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

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

0

Kirill Kozedub

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

0

Kirill Kozedub

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

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

0

Nikita Mikhaylov

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

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

0

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
25 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
25 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
25 мая 5 месяцев