How to find the distance to a text block?

Question

Layout

How, without unnecessary pain, clearly in pixels, to find out the distance not to the text (as we see to the left of the red line on the screen), but to the text block (which we see, for example, when selected)?

upd: I just found a solution in the forehead, select a block of text (ctrl + T), move the guideline on it and measure from it. But I don't really like this way.

Answer 1

Most likely not. Different fonts may have different letter sizes, vertical alignment may vary (for example, on poppies it is somehow different from Windows). You can try to get some approximate value by setting the block line-height: 1 and taking the distance to its top edge, but then this block will only look fine when it has 1 line. Well, the line height will always be equal to 1 capital letter, if it is important.

Answer 2

Using the getClientRects() method , we get the sizes and positions of the rows .

Answer 3

I measure from the letter and then adjust using the PerfectPixel extension in Chrome