How to calculate margin between blocks?

Question

css

Suppose there are two consecutive <p> elements with text, and their margins and paddings = 0
We know the font-size and line-height for both elements and we know what vertical distance should be between:
        the bottom edge of the capital letter "A" in the top element and the
        top edge of a large "A" in the bottom element.
Until now, I thought that this is easily calculated by the formula:
margin = height - (line-height-1 - font-size-1) / 2 - (line-height-2 - font-size-2) / 2
However, adjusting layout according to PixelPerfect, I came across the fact that this is not the case. I saw that if you set line-height equal to font-size, then the line-height of the page still has more text, and the larger the font-size , the larger the difference.
Question - how to calculate this margin correctly?

Answer 1

Have you ever opened a font in a font editor? Font size is not the distance from the top of a character to the bottom. In fact, it includes a little more neighboring space.
Yes, this diagram shows it well.
There is a trick to paragraph indentation.
Select the text in Photoshop with the Text tool and set a guide. Do the same with the second paragraph.
It remains to measure the distance between the guides.