# Line-Height

As classes utilitárias de `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">line-height</span>` no **WPF** permitem ajustar a altura das linhas de texto de forma rápida e consistente. Elas controlam o espaçamento entre linhas, melhorando a legibilidade e a estética do texto em parágrafos, títulos e outros elementos.

### Como Funcionam as Classes de Line Height

As classes seguem o padrão **<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">lh-\[valor\]\[unidade\]</span>**, onde:

- **<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">\[valor\]</span>** é um número (*inteiro* ou *decimal*) que **define o tamanho da altura da linha**.
- **<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">\[unidade\]</span>** é uma unidade de medida obrigatória: `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">px</span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">rem</span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">em</span>` ou `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">%</span>`.

### Regras CSS Geradas

Cada classe é convertida para a propriedade CSS `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">line-height</span>`. Por exemplo:

- `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">lh-20px</span>` → <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">`line-height: 20px`;</span>
- `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">lh-1.5rem</span>` → <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">`line-height: 1.5rem`;</span>
- `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">lh-150%</span>` → <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">`line-height: 150%`;</span>

### Como Usar

Aplique as classes diretamente aos elementos HTML, como `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn"><p></span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn"><h1></span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn"><li></span>`, etc., para ajustar o espaçamento entre linhas.

#### Exemplo 1: Texto de Corpo

```html
<p class="lh-1.6rem">
  <!-- Este parágrafo tem uma altura de linha de 1.6rem, ideal para legibilidade em textos longos. -->
</p>
```

#### Exemplo 2: Títulos

```html
<h2 class="lh-1.2em">
  <!-- Este título usa uma altura de linha mais compacta, perfeita para textos curtos. -->
</h2>
```

### Notas

<p class="callout warning">Essas classes exigem uma unidade de medida (`<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">px</span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">rem</span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">em</span>`, ou `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">%</span>`). Valores sem unidade (ex.: `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">lh-1.5</span>`) não são suportados por este conjunto de utilitários.  
</p>