スクロールスナップ時のマージンを指定するプロパティです。固定ヘッダーがある場合などに、スクロール位置を調整して要素が隠れないようにできます。
scroll-margin: <length>| scroll-mt-14 | scroll-margin-top: 56px |
一般形: scroll-m{t|b|s|e}-{n}(n×4px)
任意値: scroll-mt-[56px]
scroll-margin-top: 80px;固定ヘッダー分のマージンを確保
scroll-margin: 20px;全方向に20pxのマージン
scroll-margin: 10px 20px;上下10px、左右20px
アンカーリンクでジャンプした時、固定ヘッダーの下に隠れないようにできる。scroll-snap-alignと組み合わせて余白を調整。
scroll-paddingと混同しやすい。scroll-marginは子要素に、scroll-paddingは親要素に指定する。
固定ヘッダーのあるページでアンカーリンクの着地位置がヘッダーに隠れる問題——AIはpadding-top+負マージンの古いハックを出しがちですが、現在はscroll-margin-top: ヘッダー高さ の1行が正解です。scroll-padding(コンテナ側指定)との対の関係も覚えておくと使い分けられます。
固定ヘッダーで見出しへのアンカーリンクが隠れる問題をscroll-margin-topで修正して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。