CSS - line-height issue

Question

Watch the gap between <h1>Jedálny lístok</h1> and <h2>A</h2>

• What really makes the line-height attribute?
• Why line-height: 1.5; not equal to line-height: 1.5em;
• The gap is the same in both cases or a line-heigh destroyed that because without line-height are same...

With

body {
  line-height: 1.5;
}

Without

Answer 1

In the case of inherited values, line-height: 1.5 is not equal to line-height: 1.5em; For example if an inner element has twice the font size of its parent, then the inherited value 1.2 means that 1.2 times its own font size is used.

Answer 2

/* Keyword values */
line-height: normal;

/* Unitless: use this number multiplied by the element's font size */ 
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Syntax