line-height
En esta página
| Clase | Propiedades CSS |
|---|---|
text-<size>/<number> |
font-size: <size>;\nline-height: calc(var(--spacing) * <number>); |
text-<size>/(<custom-property>) |
font-size: <size>;\nline-height: var(<custom-property>); |
text-<size>/[<value>] |
font-size: <size>;\nline-height: <value>; |
leading-none |
line-height: 1; |
leading-<number> |
line-height: calc(var(--spacing) * <number>); |
leading-(<custom-property>) |
line-height: var(<custom-property>); |
leading-[<value>] |
line-height: <value>; |
Examples#
Basic example#
Use font size utilities like text-sm/6 and text-lg/7 to set the font size and line-height of an element at the same time:
{
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.
}
<!-- [!code classes:text-base/6,text-base/7,text-base/8] -->
<p class="text-base/6 ...">So I started to walk into the water...</p>
<p class="text-base/7 ...">So I started to walk into the water...</p>
<p class="text-base/8 ...">So I started to walk into the water...</p>
Each font size utility also sets a default line height when one isn't provided. You can learn more about these values and how to customize them in the font-size documentation.
Setting independently#
Use leading-<number> utilities like leading-6 and leading-7 to set the line height of an element independent of the 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.
<!-- [!code classes:leading-6,leading-7,leading-8] -->
<p class="text-sm leading-6">So I started to walk into the water...</p>
<p class="text-sm leading-7">So I started to walk into the water...</p>
<p class="text-sm leading-8">So I started to walk into the water...</p>
Removing the leading#
Use the leading-none utility to set the line height of an element equal to its font size:
{
The quick brown fox jumps over the lazy dog.
}<!-- [!code classes:leading-none] -->
<p class="text-2xl leading-none ...">The quick brown fox...</p>