Emptyform
@Emptyform

Как вычислиить margin между блоками?

Положим, есть два идущих подряд элемента <p> с тектстом, причем маржины и паддинги у них = 0

Мы знаем font-size и line-height для обоих элементов и знаем какое расстояние по вертикали должно быть между :
        нижним краем большой буквы "А" в верхнем элементе и
        верхним краем большой буквы "А" в нижнем элементе.

До сих пор я считал что это легко вычисляется по формуле:
margin = height  -  (line-height-1  -  font-size-1) / 2  -  (line-height-2  -  font-size-2) / 2

Однако, выверяя верстку по PixelPerfect, столкнулся с тем, что это не так. Увидел, что если выставить line-height равным font-size , то на странице все равно line-height больше текста, причем чем больше font-size, тем больше и разница.

Вопрос - как правильно вычислять этот маржин ?
  • Вопрос задан
  • 256 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вы когда-нибудь открывали шрифт в шрифтовом редакторе? Размер шрифта - это не расстояние от верхнего края символа до нижнего. На самом деле туда входит еще немного соседнего пространства.
font-sizes-large.gif
Да данной схеме это хорошо видно.

По поводу отступов у параграфа есть хитрость.
Выделите в фотошопе текст инструментом Text и выставить направляющую. Аналогично поступить со вторым параграфом.
20160115-131057.png
Остаётся замерить расстояния между направляющими.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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