Tailwind CSS - 行高
Tailwind CSS Line Height 行高 是一组预定义类，使我们能够通过设置网页上的行高值来控制文本行之间的间距。
Tailwind CSS 行高类
以下是 Tailwind CSS 行高类列表，这些类提供了调整文本行间距的选项。
| 类 | CSS 属性 |
|---|---|
| leading-3 | line-height: .75rem; /* 12px */ |
| leading-4 | line-height: 1rem; /* 16px */ |
| leading-5 | line-height: 1.25rem; /* 20px */ |
| leading-6 | line-height: 1.5rem; /* 24px */ |
| leading-7 | line-height: 1.75rem; /* 28px */ |
| leading-8 | line-height: 2rem; /* 32px */ |
| leading-9 | line-height: 2.25rem; /* 36px */ |
| leading-10 | line-height: 2.5rem; /* 40px */ |
| leading-none | line-height: 1; |
| leading-tight | line-height: 1.25; |
| leading-snug | line-height: 1.375; |
| leading-normal | line-height: 1.5; |
| leading-relaxed | line-height: 1.625; |
| leading-loose | line-height: 2; |
Tailwind CSS 行高类的功能
- leading-3 此类应用 0.75 rem 的行高，相当于文本间距 12 像素。
- leading-4 此类应用1 rem，相当于文本间距 16 像素。
- leading-5:此类应用 1.25 rem 的行高，相当于文本间距 20 像素。
- leading-6:此类应用 1.5 rem 的行高，相当于文本间距 24 像素。
- leading-7:此类应用 1.75 rem 的行高，相当于文本间距 28 像素。
- leading-8:此类应用 2 rem 的行高，相当于文本间距 32 像素。
- leading-9:此类应用 2.25 rem 的行高，相当于文本间距 36 像素。
- leading-10:此类应用2.5 rem，相当于 40 像素的文本间距。
- leading-none 此类应用 1 rem 的行高，消除行间多余间距。
- leading-tight 此类应用 1.25 rem 的行高，使文本间距更紧密。
- leading-snug 此类应用 1.375 rem 的行高，使文本间距略微缩小。
- leading-normal 此类应用 1.5 rem 的行高，这是文本的默认行高。
- leading-relaxed 此类应用 1.625 rem 的行高，使文本呈现开放的外观。
- leading-loose 此类应用 2 rem 的行高，在文本之间创建多余空间文本行。
Tailwind CSS 行高类示例
以下是 Tailwind CSS 行高类的示例，这些类可实现网页上文本行之间垂直间距的精确调整。
设置固定行高
此示例展示了 Tailwind CSS 如何管理行高类，从 leading-3 到 leading-10，以 4 像素为增量显示间距。然后，它使用 leading-none 和 leading-tight 提供精确的文本间距控制选项。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-4">
Tailwind CSS Line Height
</h2>
<p class="underline"><strong>leading-3:</strong></p>
<p class="leading-3 mb-4">
Tea is more than just a beverage; it accompanies me
from the morning's first sip to the soothing cup
before bed, offering moments of peace.
</p>
<p class="underline"><strong>leading-4:</strong></p>
<p class="leading-4 mb-4">
Tea is more than just a beverage; it's with me from
the morning's first sip to the soothing cup before
bed, offering moments of peace.
</p>
<p>
<strong>Continue increasing up to leading-10
for more spacing...</strong>
</p>
</body>
</html>
设置相对行高
此示例展示了如何使用 Tailwind CSS 通过 leading-snug、leading-normal、leading-relaxed 和 leading-loose 类来调整行高。每个段落显示不同的行高设置，并且文本行之间的间距也不同。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-4">
Tailwind CSS Line Height
</h2>
<p class="underline"><strong>leading-snug:</strong></p>
<p class="leading-snug mb-4">
Tea is more than just a beverage; it accompanies me
from the morning's first sip to the soothing cup
before bed, offering moments of peace.
</p>
<p class="underline"><strong>leading-relaxed:</strong></p>
<p class="leading-relaxed mb-4">
Tea is more than just a beverage; it's with me from
the morning's first sip to the soothing cup before
bed, offering moments of peace.
</p>
<p class="underline"><strong>leading-normal:</strong></p>
<p class="leading-normal mb-4">
Tea is more than just a beverage; it accompanies me
from the morning's first sip to the soothing cup
before bed, offering moments of peace.
</p>
<p class="underline"><strong>leading-loose:</strong></p>
<p class="leading-loose">
Tea is more than just a beverage; it accompanies me
from the morning's first sip to the soothing cup
before bed, offering moments of peace.
</p>
</body>
</html>
