Change the line height using the .lh-*
utilities.
Quick reference
Class | Properties |
---|---|
.lh-1 | line-height: 1; |
.lh-sm | line-height: 1.25; |
.lh-base | line-height: 1.5; |
.lh-md | line-height: 1.75; |
.lh-lg | line-height: 2; |
Basic usage
Relative line-heights
Use the lh-1
, lh-sm
, lh-base
, lh-md
, lh-lg
utilities to give an element a relative line-height based on its current font-size.
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.
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.
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>
Fixed line-heights
Developing