DocsComponents

Line Height

Utilities for controlling the line height of an element’s text.
Contents

Change the line height using the .lh-* utilities.

Quick reference

ClassProperties
.lh-1line-height: 1;
.lh-smline-height: 1.25;
.lh-baseline-height: 1.5;
.lh-lgline-height: 2;

Basic usage

Relative line-heights

Use the lh-{size} utilities to give an element a relative line-height based on its current font-size.

lh-1

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

lh-base

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

lh-lg

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="lh-1 ...">So I started to walk into the water...</p>
<p class="lh-base ...">So I started to walk into the water...</p>
<p class="lh-lg ...">So I started to walk into the water...</p>