Pull to refresh

Таблица значений отступов от букв до верха и низа строки

CSS
Предлагаю вашему вниманию таблицу значений отступов от букв до верха и низа строки, для стандартного значения line-height.
Эта таблица нужна для точного определения padding или margin обрамляющего или близлежащих элементов.

Вот картинка-легенда, чтобы было понятно о чем речь:
легенда


Со временем самые популярные комбинации запоминаются и не нужно каждый раз смотреть значение.

Простой пример:

пример
  1. Заголовок у нас набран шрифтом Tahoma, размером 24px. Смотрим таблицу, расстояние от верха маленькой буквы, до верха строки — 11px.
  2. Далее, с помощью линейки, измеряем значение от верха маленькой буквы, до верхней границы блока — 33px.
  3. Находим разность значений, получаем 22px. Значит, верхний padding блока равен 22px.
  4. Или, если для body у нас задан размер шрифта 75%, то верхний padding будет равен 22/12=1.833em.

Включает в себя значения для шрифтов, размером от 8px до 50px:
  • Arial
  • Tahoma
  • Verdana
  • Arial Narrow
  • Trebuchet MS
  • Georgia
  • Times New Roman

Таблица тут

P.S. Да, я знаю, что теперь есть Pixel Perfect.
Tags:таблицаline-heightпиксельное соответствиеPixel Perfect
Hubs: CSS
Total votes 58: ↑48 and ↓10 +38
Views1.1K

Popular right now

Python для веб-разработки
June 24, 202190,000 ₽SkillFactory
DevOps-инженер
June 24, 202172,000 ₽SkillFactory
UI-дизайнер
June 25, 202147,940 ₽Нетология
Python для работы с данными
June 25, 202131,500 ₽Нетология