# line-height

> 行の高さ（行間）を指定するプロパティです。数値（推奨）、px、%、emで指定でき、読みやすさに大きく影響します。一般的に1.5〜1.8が読みやすいとされ、単位なしの数値指定が推奨されます。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/line-height/

## 構文

```css
line-height: normal | <number> | <length> | <percentage>
```

## Tailwindでは

- `leading-none` → line-height: 1
- `leading-tight` → line-height: 1.25
- `leading-relaxed` → line-height: 1.625
- `leading-6` → line-height: 24px
- 一般形: `leading-{n}（n×4px）`
- 任意値: `leading-[1.8]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: フォントサイズの1.6倍の行高（推奨値）

```css
line-height: 1.6;
```

### 例2: フォントサイズと同じ高さ（タイトル用）

```css
line-height: 1;
```

### 例3: 絶対値で行高を指定

```css
line-height: 2rem;
```

## TIPS

単位なしの数値指定が推奨。1.4-1.6が読みやすい。

## AIがよく間違えるポイント

line-heightは単位なし（例: 1.7）で書くのが原則です。em や % で書くと「計算後の値」が子に継承され、フォントサイズの違う子要素で行間が破綻します。AIは1.5emのような単位付きを出すことがあるので注意。日本語本文は英語より広めの1.7〜1.9が読みやすい目安です。

## AIへの依頼文例

- このline-heightの単位付き指定を単位なしに直して、継承の破綻がないか確認して

## 関連プロパティ

- [font-size](https://www.css-dictionary.com/property/font-size.md)
- [vertical-align](https://www.css-dictionary.com/property/vertical-align.md)