line-height

p.test { line-height: 1.4;}
p.test1 { line-height: 30px;}
p.test2 { line-height: normal;}

Value	Description
normal	The browser calculates the line height based on the current font family. According to the specification, this is approximately 1.2 times the font size. This is the initial value.
number	Specifies a numeric value. Supported units include 'px', 'em', '%', etc. A unitless number is also allowed and is recommended when you want a relative value.

<p style="line-height: normal;">This is a p element with 'line-height: <span style="color: #f00;">normal</span>'. Once upon a time there was a couple who had long wished for a child...</p>

<p style="line-height: 30px;">This is a p element with 'line-height: <span style="color: #f00;">30px</span>'. Once upon a time there was a couple who had long wished for a child...</p>

<p style="line-height: 2.0;">This is a p element with 'line-height: <span style="color: #f00;">2.0</span>'. Once upon a time there was a couple who had long wished for a child...</p>

※ Version data is based on MDN.

Specifies the minimum height of a line box. Note that this is a minimum height — the actual height may be larger due to replaced elements or vertical alignment set via the 'vertical-align' property.

When specified with an absolute unit like 'px', that value is used directly as the line box height and inherited as-is by descendant elements.

<div style="font-size: 20px; line-height: 30px; border: solid 1px #000;">
	This is a div with 'font-size: 20px' and 'line-height: 30px'. The line height is exactly 30px.
</div>

<div style="font-size: 15px; line-height: 30px; border: solid 1px #000;">
This is a div with 'font-size: 15px' and 'line-height: 30px'.
<p style="color: #00f; border: solid 1px #00f; margin: 10px;">This p element has no 'line-height', but inherits 'line-height: 30px' from its parent.<br><span style="color: #f00; display: block; border: solid 1px #f00; margin: 10px;">This span element also inherits 'line-height: 30px'.</span></p>
</div>

When specified with a relative unit like 'em' or '%', the computed value (based on the current font size) is what gets inherited — not the factor itself.

<div style="font-size: 20px; line-height: 1.5em; border: solid 1px #000;">
	This is a div with 'font-size: 20px' and 'line-height: 1.5em'. The computed line height is 30px.
</div>

When using 'em' or '%', the computed line height value is inherited by descendant elements as a fixed value. This can cause unintended results if child elements have different font sizes.

<div style="font-size: 15px; line-height: 2.0em; border: solid 1px #000;">
This is a div with 'font-size: 15px' and 'line-height: 2.0em'. The computed line height is 30px.
<p style="color: #00f; border: solid 1px #00f; margin: 10px;">This p inherits the computed value of 30px — not the factor 2.0.<br><span style="color: #f00; display: block; border: solid 1px #f00; margin: 10px;">This span also inherits 30px.</span></p>
</div>

When specified as a unitless number, the value is multiplied by the current font size. For example, 'font-size: 20px' with 'line-height: 1.5' gives a line height of 30px.

<div style="font-size: 20px; line-height: 1.5; border: solid 1px #000;">
	This is a div with 'font-size: 20px' and 'line-height: 1.5'. The line height is 30px.
</div>

With a unitless number, the factor itself is inherited — not the computed value. Each descendant calculates its own line height by multiplying the factor by its own font size.

<div style="font-size: 15px; line-height: 2.0; border: solid 1px #000;">
This is a div with 'font-size: 15px' and 'line-height: 2.0'. Line height is 30px.
<p style="font-size: 18px; color: #00f; border: solid 1px #00f; margin: 10px;">This p has 'font-size: 18px'. It inherits 'line-height: 2.0', so its line height is 36px.<br><span style="font-size: 20px; color: #f00; display: block; border: solid 1px #f00; margin: 10px;">This span has 'font-size: 20px'. It inherits 'line-height: 2.0', so its line height is 40px.</span></p>
</div>

When you want a relative line height, it is recommended to use a unitless number to avoid unintended inherited computed values when using 'em' or '%'.

Note that 'line-height' sets the height of the line box, not the gap between lines. See also the 'vertical-align' property.