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

Question

[Emptyform]

Положим, есть два идущих подряд элемента <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, тем больше и разница.

Вопрос - как правильно вычислять этот маржин ?

Comments

[Mr Crabbz]

Сам сталкивался с такой бедой. ПО моим наблюдениям, фотошоп просто лучше рендерит шрифты и точнее показывает line-height. В браузерах же он может немного плясать в зависимости от самого шрифта. Причём даже бывает, что один и тот же шрифт в разных браузерах показывает один и тот же line-height по разному.

Answer 1

[Сергей delphinpro]

Вы когда-нибудь открывали шрифт в шрифтовом редакторе? Размер шрифта - это не расстояние от верхнего края символа до нижнего. На самом деле туда входит еще немного соседнего пространства.

Да данной схеме это хорошо видно.

По поводу отступов у параграфа есть хитрость.
Выделите в фотошопе текст инструментом Text и выставить направляющую. Аналогично поступить со вторым параграфом.

Остаётся замерить расстояния между направляющими.

Comments

[Emptyform]

Сергей >> ... и выставить направляющую << пардон, а как это сделать? Не приходилось еще ни разу выставлять направляющие

[Сергей delphinpro]

Emptyform: Включите линейки (Ctrl+R) или через меню. Схватите мышкой за линейку и потащите на холст.

[Сергей delphinpro]

Меню в русифицированной версии - Просмотр - Линейки

[Emptyform]

Сергей: Включил линейки, взял мышкой верхнюю линейку, потянул - появилась горизонтальная линия типа dashed черного цвета, дотащил ее до нижнего края выделенной строки, отпустил - линия исчезла (