Well, in my opinion, all these (<number> | <length> em | <percentage>) relative measures might be appropriate for line-height property.
<number> The used value is this unitless <number> multiplied by the
element's font size. The computed value is the same as the specified
<number>. In most cases this is the preferred way to set line-height
with no unexpected results in case of inheritance.
<length> The
specified <length> is used in the calculation of the line box height.
<percentage> Relative to the
font size of the element itself. The computed value is this percentage
multiplied by the element's computed font size. Percentage and em
values may have unexpected results.
The difference between number and percentage or em:
According to MDN doc, this unitless number multiplied by element's own font-size (Also for each children of the current element).
While using percentage or em for a parent element, causes the children to obey from their parent's computed line-height.
Check this demo to see the issue in action.
Putting all together
In this case, all these values have the same effect:
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* = 1.3 * computed font-size */
line-height: 130%; /* = 1.3 * computed font-size */
line-height: 1.3em; /* = 1.3 * computed font-size */
}
But to if you want to calculate the line-height value in rem unit, you can use the following:
html {
font-size: 62.5%; /* ~10px = 16px(default) * 0.625 */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* as fallback */
/* value = (10px * 1.4 * 1.3) / 10px = 1.82rem
| | |
<html> | | --> line-height multiplier (same as <number>)
font-size <-- |
in px --> Current element's font-size ratio
*/
line-height: 1.82rem;
}
span { background-color: gold; } /* for demo */
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consectetur quis omnis repellat voluptates necessitatibus repellendus
sapiente nesciunt vero dolorem voluptate mollitia ex a quo consequuntur
quia quasi aperiam quibusdam maiores.</span></p>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
