Хорошей ли практикой является использовать rem для значений margin и padding?

Я хочу улучшить свои навыки верстки, но столкнулся с некоторыми препятствиями. Одно из них - это выбор между единицами измерения. Я использую em для типографии (font-size, line-height), но не знаю как быть с отступами. Например, существует какой-либо макет сайта (PSD, Figma и т.д.), в этом макете расстояние от навигационной панели до следующего блока, скажем, 150px. Как мне стоит воплощать это в CSS? Единицы em, наверное, не подойдут, ведь если увеличить размер шрифта, то и отступы увеличатся. Тогда rem или просто px?
  • Вопрос задан
  • 221 просмотр
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
если увеличить размер шрифта, то и отступы увеличатся

Так это же замечательно, так и должно быть. И вопрос не только в доступности. Задание всех размеров в rem/em позволяет при изменении размера шрифта сохранить приятный глазу дизайн, у которого не "перекашивается" соотношение веса элементов и негативного пространства. Максимальный эффект достигается при использовании CSS-шлюзов и адаптивной типографики, что дает возможность без лишних движений сделать "красиво" на любых размерах экрана. А если заранее определить с дизайнером все стандартные размеры для всего (я часто использую .3, .5, .8, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5 rem), то можно будет быстро верстать "на глаз", по бумажным наброскам, и даже без дизайнера совсем, используя не гору магических чисел, а известный набор удобных размеров. Конечно, это ломает мозги неподготовленному дизайнеру, но многие модные ресурсы (тот же Smashing Magazine) используют подобный подход весьма успешно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
В чем проблема посмотреть исходный код Bootstrap или Bulma, в отступах и границах используется px. Зачем использовать для шрифта em когда есть rem?

UPD: Использование px + media queries, на мой взгляд, самое адекватное решение.
Ответ написан
Никогда не отходил от px - не промохнешься как говориться
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы