Задать вопрос

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

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

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

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

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

Похожие вопросы