這篇文章要介紹一組算是蠻新的 CSS 屬性，分別是 scroll-margin 和 scroll-padding，這兩個屬性是在 Scroll Snap Module Level 1 裡面定義的，目前主要的瀏覽器都有支援，IE 完全不支援，Safari 則是還在使用舊的非標準的屬性名稱，為什麼要介紹這兩個屬性呢？因為它除了原來 scroll-snap 微調的需求之外，還順便解決了一個存在已久的問題，也就是如果網頁的設計有固定浮動在頁面頂端的 header 時（Sticky/Fixed Header），使用 link 的 fragment 直接定位到頁面特定位置的時候，最上面一部份想顯示給訪客的內容會被 header 覆蓋到。
這個問題大概是從 Sticky Header 出現時就存在了，Stack Overflow 上就可以找到十年前的發問，以前的主要的解決方法就是讓連結的目標有看不到的高度，像是用padding-top，比較乾淨一點是用 pseudo-element 的:before來把內容往下推，不過這幾個方法雖然有用，但是對我來說卻一直不是個最佳解，所以一直以來我都期待能有更漂亮的解決方案，有事沒事就會搜尋一下，然後，終於我發現了這組 CSS 屬性可以用來讓瀏覽器自己捲動到目標時有指定的偏移。
scroll-margin是用在你想要捲動到的目標元件上，也就是有 id 的那個，像我的 blog 就是<article>標籤，給它加個scroll-margin-top: 56px;就可以了：
article {
scroll-margin-top: 56px;
}scroll-padding則是要用在 scroll container 上的，而不是目標的父母層，舉例來說，在我這邊，沒有特別設定任何overflow的情形下，scroll container 會落在<html>元件上，而不是<article>外面的<main>，所以設定就要改成：
html {
scroll-padding-top: 56px;
}這組 CSS 屬性我是今年才發現的，不過其實 CSS Trick 在去年就有文章介紹了：Fixed Headers, On-Page Links, and Overlapping Content, Oh My! ，真是太後知後覺了（其實也是因為我現在沒用 RSS reader 的關係）。