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 1)

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





Discover More
Css Box Size Content
CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
HTML - HTML element (Document root)

The html element represents the root of a a html document (page). It would become also the root (top node) in the in-memory tree representation (DOM document) of this html page. This is also the node...
Card Puncher Data Processing
UI - Length of a Line (of Text) (Measure of Characters per Line, CPL)

The Measure_(typography)Measure (or sometimes “The Measure”) in typography is the length of a line of text. The measure of a text influences legibility. Long lines are hard to read, short lines...



Share this page:
Follow us:
Task Runner