語法
行高line-height
Setting the height of a line box.
Overview
| Class | Declarations |
|---|---|
leading:1 | line-height: 1;
|
leading:xs | line-height: 1.2;
|
leading:sm | line-height: 1.4;
|
leading:md | line-height: 1.6;
|
leading:lg | line-height: 1.8;
|
leading:xl | line-height: 2;
|
leading:<size> | line-height: <size>;
|
Examples
Basic usage
Use the predefined line height tokens like leading:xs, leading:sm, and leading:lg to set the line height of an element.
leading:xs
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
leading:sm
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
leading:md
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
leading:lg
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
leading:xl
Design is not just about aesthetics—it’s about communication. Proper font sizes and spacing help present information clearly and improve usability.
<div class="leading:xs">Design is not just about aesthetics—it’s...</div><div class="leading:sm">Design is not just about aesthetics—it’s...</div><div class="leading:md">Design is not just about aesthetics—it’s...</div><div class="leading:lg">Design is not just about aesthetics—it’s...</div><div class="leading:xl">Design is not just about aesthetics—it’s...</div>You can also use text:<size> to set a text size with a golden ratio line height.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="leading:1:hover leading:1@sm leading:1@dark leading:1@print">…</div>