CSS辞書

scroll-margin

スペーシング・サイズ

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

構文

Syntax
scroll-margin: <length>

Tailwindでは

scroll-mt-14scroll-margin-top: 56px

一般形: scroll-m{t|b|s|e}-{n}(n×4px)

任意値: scroll-mt-[56px]

コード例

1

scroll-margin-top: 80px;

固定ヘッダー分のマージンを確保

2

scroll-margin: 20px;

全方向に20pxのマージン

3

scroll-margin: 10px 20px;

上下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で修正して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

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