# scroll-margin

> スクロールスナップ時のマージンを指定するプロパティです。固定ヘッダーがある場合などに、スクロール位置を調整して要素が隠れないようにできます。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/scroll-margin/

## 構文

```css
scroll-margin: <length>
```

## Tailwindでは

- `scroll-mt-14` → scroll-margin-top: 56px
- 一般形: `scroll-m{t|b|s|e}-{n}（n×4px）`
- 任意値: `scroll-mt-[56px]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 69+ / Firefox 90+ / Safari 14.1+ / Edge 79+

## コード例

### 例1: 固定ヘッダー分のマージンを確保

```css
scroll-margin-top: 80px;
```

### 例2: 全方向に20pxのマージン

```css
scroll-margin: 20px;
```

### 例3: 上下10px、左右20px

```css
scroll-margin: 10px 20px;
```

## TIPS

アンカーリンクでジャンプした時、固定ヘッダーの下に隠れないようにできる。scroll-snap-alignと組み合わせて余白を調整。

## よくある間違い

scroll-paddingと混同しやすい。scroll-marginは子要素に、scroll-paddingは親要素に指定する。

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

固定ヘッダーのあるページでアンカーリンクの着地位置がヘッダーに隠れる問題——AIはpadding-top+負マージンの古いハックを出しがちですが、現在はscroll-margin-top: ヘッダー高さ の1行が正解です。scroll-padding（コンテナ側指定）との対の関係も覚えておくと使い分けられます。

## AIへの依頼文例

- 固定ヘッダーで見出しへのアンカーリンクが隠れる問題をscroll-margin-topで修正して

## 関連プロパティ

- [scroll-snap-align](https://www.css-dictionary.com/property/scroll-snap-align.md)
- [scroll-behavior](https://www.css-dictionary.com/property/scroll-behavior.md)