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 property:

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>

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:

Documentation / Reference


Powered by ComboStrap