In brief
The distance of the line is separate from the height of the text line.
Useful to know
text-underline-offset sets the offset of the highlighting line to its original position. It is not a setting for all types of decorations: the crossing and the top line do not get the same effect. [1]
Example: a { text-underline-offset: 0.2em; }. The em unit links the distance to the font size. If you increase the value too much, the relationship between the text and the line may become unclear . line-height controls the height of the line and is not a substitute. Review letters with underparts and several adjacent lines to select a readable result.
Sources
For further detail and to check the information: