How to measure/convert CSS text margin/padding in the Photoshop?

Question

How to get CSS text margin/padding from the Photoshop?

or

How to convert the distance from/to the text in Photoshop into CSS margin/padding?

Distances from text elements (paragraphs) in Photoshop do not correspond to margins/paddings in the CSS. Distances are measured, for example, using smart guides:

All because the line height is not used in the distances calculation. Therefore, the first recommendation I found is to use the formula:

margin_in_CSS = distance_in_PS - (line-height - font-size) / 2

or shorter:

CSS = PS - (line-height - font-size) / 2

This is the distance from some obvious border (line) to the text element. For the distance between two paragraphs we use, respectively:

CSS = PS - (line-height_1 - font-size_1) / 2 - (line-height_2 - font-size_2) / 2

As the font size increases, it becomes clear that this formula is not enough. The actual height of the line (obtained with the selection tool) in Photoshop is even less than the font size!

Although the photoshop still considers the height of the element to be approximately equal to the font size, which does not affect the distance to it :(. For example, on the Properties tab:

I calculated that the difference between the real height of the line and the font size is about 30% or 15% at the top and bottom of the text (I'm not saying this is 100% true!). And now I use the formula:

CSS = PS - (0.15 * font-size + (line-height - font-size) / 2)

Or between two paragraphs:

CSS = PS - (0.15 * font-size_1 + (line-height_1 - font-size_1) / 2)
         - (0.15 * font-size_2 + (line-height_2 - font-size_2) / 2)

Similarly, we can not rely on the correct definition of the height of a paragraph in several lines by Photoshop. But here the situation is simpler, the real height of the paragraph in the CSS will be:

height = line-height * num_of_lines

The question is, is there a simpler way? О_о

Sorry for my English ^_^

---

UPDATE, shorter formulas:

text <> border

CSS = PS - (line-height - 0.7 * font-size) / 2

text <> text

CSS = PS - (line-height_1 - 0.7 * font-size_1) / 2
         - (line-height_2 - 0.7 * font-size_2) / 2

---

UPDATE:

Now a script is being developed for the correct calculation of distances on the Adobe forum (link). At the moment, the script can calculate the distance from the bounding box of the text line with a standard (auto) line-height of 120%.

---

UPDATE:

It does not matter if you use a pointed text or a paragraph text, the result bounding box height is not equal to the text line-height (leading)

Answer 1

How to convert the distance from/to the text in Photoshop into CSS margin/padding?

The actual resulting glyph(s) (pink border in your image) of your text will have different height with the following contents:

• "
• [empty space] = no glyph at all
• ...
• a
• A
• Qq
• q

Margins and paddings should not be measured from the text itself, but from the boundaries of text line (or line-height in CSS).

In the above example:

65px is the actual height of text line (or line-height in CSS), (the distance from two text baselines when the text wraps) and what is used when calculating margin/padding. The end result being that no matter the contents of your text element, the distance from its baseline to the element following it should remain the same, based on line-height, (bottom) margin and (bottom) padding (and, of course, on the top margin and padding of next element).

To answer your question in a nutshell, PS does not apply a reduction to margins. It's just they are not calculated from the bounding box of the text glyphs (which might vary depending on contents), but from the bounding box of text line.

Another thing to consider when converting from .psd to HTML is that in HTML you have collapsing margins. In short, from two vertical adjacent margins only the largest one will be kept. If the other one is negative, it will be deducted from the positive one and if both are negative, the one with the largest value will be applied.