CSS - line-height Property

About

On block level elements, the line-height property specifies the space between the text lines and is known as the Leading ¹⁾

Syntax

line-height: value;

where:

the value is one of:
- normal, - let the browser choose a reasonable value (ie a number between 1.0 to 1.2 of the font size). normalize stylesheets have a value of 1.15.
- number, - number ratio of the font size
- length,
- percentage (refer to the font size of the element itself)
- inherit
the default value is normal

The property:

applies to all elements
is Inherited
applies to the visual media

Ref

Font-size ratio

The bigger, the font-size, the bigger the line-height (or leading) should be for readability.

normalize stylesheets have a ratio value of 1.15 that they set on the html element

Example

The effect of line-height of the box height

line-height has an effect on the height of a box. This demo shows this effect.

The common css for all line

p {
    border: 1px solid steelblue; /* border to see the box */
    font-size: 1rem; /* The default */
}

Line height scaled via the below CSS rules

p.normal { line-height: normal; /* the default */ }
p.small { line-height: 0.8rem; }
p.big { line-height: 3rem; }
p.null { line-height: 0; }

The html with one section by line-height

<h1>Normal line height</h1>
<p class="normal">A normal line height will make the box height look normal. This text is to see two lines for the paragraph.</p>
<h1>Small line height</h1>
<p class="small">A small line height will make the box height smaller. This text is to see two lines for the paragraph.</p>
<h1>Big line height</h1>
<p class="big">A big line height will make the box height bigger. This text is to see two lines for the paragraph.</p>
<h1>No line height</h1>
<p class="null">A null line height will make the box as a line. This text is to see two lines for the paragraph.</p>

Rendered by WebCode

How to get the actual line-height with Javascript

The javascript that uses the computed style function

let html = document.querySelector('html');
let styles = window.getComputedStyle(html);
console.log("The default line height is "+styles.getPropertyValue("line-height"));

The result:

Rendered by WebCode

Documentation / Reference

¹⁾

wiki/Leading