Как правильно пересчитывать поля и отступы из px в em?

Question

[Uladzimir A]

Подскажите пожалуйста, правильно ли я понимаю правила пересчета полей и отступов из px в em? Если элементу задан размер шрифта то margin и padding делятся на него, а если не задан то делятся на шрифт родителя? Пробовал по методу Итона Маркота, т.е. margin делим на размер шрифта родителя, а padding делим на размер шрифта самого элемента, так вот не всегда проходит такой дележ... Подскажите как все же правильно?

Answer 1

[Павел Радьков]

Margin и padding в em всегда рассчитываются от размера шрифта своего элемента по формуле:

margin(em) = margin(px) / font-size(px)

где font-size(px) — вычисленное значение размера шрифта. Хотя сам размер шрифта может быть задан в любых единицах измерения или может быть унаследован от любого своего родителя.

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

Comments

[Uladzimir A]

Большое спасибо за ответ. Для таких подсчетов я пользуюсь Firefox'ом там мне больше нравится вкладка "вычислено". Еще раз спасибо!!!

[Павел Радьков]

Посмотрите еще Какие единицы измерения предпочтительнее использовать для адаптивной верстки CSS 3?

[Uladzimir A]

Павел Радьков: Спасибо, очень полезно. Здорово, что людям не лень писать так все подробно!

Answer 2

[zooks]

Проще пересчитать в rem:
1rem = 16px

Comments

[Uladzimir A]

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