ZUI 3行高
定义
使用 leading-* 工具类来控制元素文字行高。
| 工具类 | CSS 属性 |
|---|---|
| leading-3 | line-height: .75rem; |
| leading-4 | line-height: 1rem; |
| leading-5 | line-height: 1.25rem; |
| leading-6 | line-height: 1.5rem; |
| leading-7 | line-height: 1.75rem; |
| leading-8 | line-height: 2rem; |
| leading-9 | line-height: 2.25rem; |
| leading-10 | line-height: 2.5rem; |
| 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; |
固定行高
使用 leading-* 工具类给一个元素一个固定的行高。
leading-3 行高展示
leading-4 行高展示
leading-5 行高展示
leading-6 行高展示
leading-7 行高展示
leading-8 行高展示
leading-9 行高展示
leading-10 行高展示
相对行高
使用 leading-none、 leading-tight、 leading-snug、 leading-normal、 leading-relaxed 和 leading-loose 等工具类，根据元素当前的字体大小，给它一个相对的行高。
leading-none 行高展示
leading-none 行高展示
leading-none 行高展示
leading-tight 行高展示
leading-tight 行高展示
leading-tight 行高展示
leading-snug 行高展示
leading-snug 行高展示
leading-snug 行高展示
leading-normal 行高展示
leading-normal 行高展示
leading-normal 行高展示
leading-relaxed 行高展示
leading-relaxed 行高展示
leading-relaxed 行高展示
leading-loose 行高展示
leading-loose 行高展示
leading-loose 行高展示