[{"_1":2,"_218":-5,"_219":-5},"loaderData",{"_3":4,"_54":55},"root",{"_5":-5,"_6":-5,"_7":8,"_9":8,"_10":11,"_16":17,"_25":26,"_38":39,"_50":51,"_52":8,"_53":37},"userId","user","isAdmin",false,"resetAdminAnalyticsOverride","cacheKeys",{"_12":13,"_14":15},"notion",[],"files",[],"__cacheKeys",{"_12":18,"_14":19},[],[20],{"_21":22,"_23":24},"label","OG Image","key","og-image:homepage:v4","analyticsConfig",{"_27":28,"_29":30,"_31":32,"_33":34,"_35":8,"_36":37},"provider","ga4","trackingId","G-QSDPMPZJJP","domain","","environment","production","debug","enabled",true,"analyticsScripts",[40,46],{"_41":42,"_43":44,"_45":37},"type","external","src","https://www.googletagmanager.com/gtag/js?id=G-QSDPMPZJJP","async",{"_41":47,"_48":49},"inline","content","window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\n// GA4 initialization with Consent Mode v2\ngtag('consent', 'default', {\n ad_user_data: 'denied',\n ad_personalization: 'denied',\n ad_storage: 'denied',\n analytics_storage: 'granted',\n wait_for_update: 500\n});\n// Initialize GA4\ngtag('js', new Date());\ngtag('config', 'G-QSDPMPZJJP', {\n send_page_view: false,\n // Ensure events can be sent even with consent updates\n allow_google_signals: false,\n allow_ad_features: false\n});","clientLogLevel","warn","newsletterEnabled","contactFormProtectionEnabled","routes/toolkit/items.$slug",{"_56":57,"_113":114,"_115":-7,"_109":110,"_71":72,"_116":37,"_117":8,"_7":8,"_118":119,"_120":121,"_122":123,"_199":37,"_200":8,"_201":202,"_203":204,"_16":206},"item",{"_58":59,"_60":61,"_41":62,"_63":64,"_70":32,"_71":72,"_73":8,"_74":32,"_75":76,"_77":8,"_78":79,"_80":81,"_98":32,"_99":100,"_101":-7,"_102":-7,"_103":104,"_109":110,"_111":112},"id","337a80b7-1924-80f9-b1e1-c909d9217a74","title","CSS Scroll-Margin-Top vs Scroll-Padding-Top","scroll","tags",[65,66,67,68,69],"ui","development","guide","design","ux","path","status","Published","hasValidUrl","publishedLinkUrl","slug","scroll-margin-top-vs-scroll-padding-top","featured","sortDate","2025-10-01","description",[82],{"_41":83,"_83":84,"_87":88,"_96":85,"_97":-5},"text",{"_48":85,"_86":-5},"Two CSS properties. Same problem. Different owners. An interactive reference explaining when to use scroll-padding-top versus scroll-margin-top — with a live demo, a decision guide, and the gotchas the docs skip over.","link","annotations",{"_89":8,"_90":8,"_91":8,"_92":8,"_93":8,"_94":95},"bold","italic","strikethrough","underline","code","color","default","plain_text","href","embeddedContent","format","Scroll","epubUrl","pdfUrl","heroMedia",[105],{"_41":106,"_107":108},"image","url","/asset/337a80b7-1924-80f9-b1e1-c909d9217a74.hero-media-0","visibility","public","discoverability","discoverable","blocks",[],"firstContentImageUrl","canViewContent","authed","authors",[],"tableOfContents",[],"relatedItems",[124,141,149,157,163,171,182,191],{"_58":125,"_60":126,"_75":127,"_99":128,"_129":130,"_131":132,"_63":133,"_71":72,"_109":110},"33ea80b7-1924-80d7-a968-c590230cf56c","HTML-in-Canvas.dev","html-in-canvas-dot-dev","App","publishedLink","https://html-in-canvas.dev","commonTags",[65,66,67,68,69],[134,135,136,137,138,139,140],"Ui","Development","Guide","Design","Ux","Product","Tooling",{"_58":142,"_60":143,"_75":144,"_99":100,"_129":32,"_131":145,"_63":146,"_71":72,"_109":110},"32ca80b7-1924-80f9-b78e-dbfe2f68b849","Modal vs Modeless, an exploration","modal-vs-modeless-exploration-scroll",[65,66,67,68,69],[134,135,136,137,138,147,148,139],"Focus","Communication",{"_58":150,"_60":151,"_75":152,"_99":153,"_129":154,"_131":155,"_63":156,"_71":72,"_109":110},"105a80b7-1924-8026-b355-f9458e8e92e5","Defining: Modal vs Modeless","defining-modal-vs-modeless","Blog","https://blog.endash.us/posts/defining-modal-vs-modeless",[65,66,68,69],[134,135,137,138,139],{"_58":158,"_60":159,"_75":160,"_99":153,"_129":32,"_131":161,"_63":162,"_71":72,"_109":110},"105a80b7-1924-8096-9ec4-d806f3aeb091","Designing: Modal vs Modeless","designing-modal-vs-modeless",[65,66,68,69],[134,135,137,138,139],{"_58":164,"_60":165,"_75":166,"_99":128,"_129":167,"_131":168,"_63":169,"_71":72,"_109":110},"33aa80b7-1924-8037-98c5-c2dc71f63574","Learn Pretext","learn-pretext","https://learn-pretext.com",[65,66,67,69],[134,135,136,138,170,139],"Continuousimprovement",{"_58":172,"_60":173,"_75":174,"_99":100,"_129":32,"_131":175,"_63":176,"_71":72,"_109":110},"35fa80b7-1924-8098-a9c4-c1b22e81f965","Mini Shai-Halud","mini-shai-halud",[66,67,68],[135,136,137,177,178,179,180,181],"Ai","Governance","Dependency","Project","MachineLearning",{"_58":183,"_60":184,"_75":185,"_99":100,"_129":32,"_131":186,"_63":187,"_71":72,"_109":110},"398a80b7-1924-80e5-bea3-f9a44436596a","AI Delivery Friction Finder","ai-delivery-fiction-finder",[66,67],[135,136,177,188,189,190],"Collaboration","Delivery","Agile",{"_58":192,"_60":193,"_75":194,"_99":100,"_129":32,"_131":195,"_63":196,"_71":72,"_109":110},"33aa80b7-1924-80bf-85de-cdcd37eff145","Claude and PowerBI","claude-powerbi-scroll",[66,67],[135,136,177,197,198],"Career","Prompts","fieldGuideDescriptionEnabled","fieldGuideContentHidden","scrollHtmlContent","\n \n \n scroll-margin-top vs scroll-padding-top — En Dash\n \n\n

\n\n\n\n

\n \n

\n\n\n

\n\n \n

\n CSS Scroll Behavior — En Dash Reference\n

Your nav bar is eating
your headings.

\n Two CSS properties fix it. They're not the same. Here's the demo first,\n then the explanation.\n

\n scroll-padding-top\n scroll-margin-top\n

\n\n \n

\n Live Demo\n

See it land

\n A scroll container with its own sticky header. Pick a mode, jump to any section,\n watch where the heading lands. The teal line marks the offset boundary when a fix is active.\n Switch modes and re-click the same button to compare directly.\n

\n\n

\n \n

Scroll container

Sticky Nav

Content above first section…

Section One

Does the heading clear the bar, or slide beneath it? That's the whole question.

Section Two

Taller content to give enough scroll range to show the offset clearly.

More content — more content — keep going.

Section Three

Switch modes, re-click the same link. Compare the exact landing position.

Section Four

Same result, different architecture. That's the whole lesson.

\n \n

Jump to section

\n \n \n \n \n

\n Mode: No fix
Applied CSS: none\n

\n\n \n

\n Context\n

Same fix. Different owner.

\n You have a sticky nav. You have anchor links. The browser scrolls the target to the\n top edge of the scrollport — directly behind your bar. The old workaround\n was a ghost element: margin-top: -80px; padding-top: 80px on every target.\n Works until nav height changes. Works until someone deletes it.\n

\n \"The browser isn't wrong. It put the element at the top. You just forgot something already lives there.\"\n

\n Both properties offset where \"arrived\" means. The only distinction is\n which element each goes on.\n

\n\n

Where each property lives in the DOM

scroll-padding-top — on the container

┌ <html> scroll-padding-top: 64px

├ <nav> sticky, 64px

├ <section id=\"a\">

└ <section id=\"b\">

One declaration. Every anchor jump in the container respects it.

scroll-margin-top — on the element

┌ <html>

├ <nav> sticky, 64px

├ <section id=\"a\"> scroll-margin-top: 64px

└ <section id=\"b\"> scroll-margin-top: 80px

Per-element. Each target declares its own offset independently.

\n\n

\n The short version: same offset everywhere? Put scroll-padding-top\n on html once. Different offsets per element, or nested scroll containers?\n Use scroll-margin-top on the targets.\n

\n\n \n

\n Deep Dive\n

The properties

\n \n \n

\n\n

\n On the container\n

Insets the scroll container's optimal viewing region from the top. When the browser scrolls to any anchor inside the container, it lands the element within this inset area — not flush with the raw top edge.

\n Applies to: Scroll containers\n ✓ Percentages accepted\n ✕ No negative values\n Also affects: scroll-snap alignment\n Shorthand: scroll-padding\n

/* One line. Fixes every anchor link on the page. */\nhtml {\n  scroll-padding-top: 64px;\n}\n\n/* Tie it to a custom property for easy maintenance */\n:root { --nav-h: 64px; }\nhtml  { scroll-padding-top: var(--nav-h); }\n\n/* Works on any scroll container, not just html */\n.sidebar {\n  overflow-y: scroll;\n  scroll-padding-top: 48px;\n}

\n \n

Also moves snap points

scroll-padding-top shifts where scroll-snap-align: start children snap, not just where anchor links land. One property on the container. Zero per-item work.

Don't use :root. They select the same element, but the property targets the scroll container. Use the html type selector. :root silently fails.

\n\n

\n On the element\n

Expands the target element's scroll snap area outward. The browser acts as if the element starts N pixels higher. Zero layout impact — box model, padding, margin are untouched. Only the scroll algorithm sees this.

\n Applies to: All elements\n ✓ Negative values valid\n ✕ No percentages (silent fail)\n Layout impact: none\n Shorthand: scroll-margin\n

/* Per-element, per-target */\n#about    { scroll-margin-top: 80px; }\n#features { scroll-margin-top: 64px; }\n\n/* scrollIntoView() respects it too — no JS offset math */\nel.scrollIntoView({ behavior: 'smooth', block: 'start' });\n\n/* Negative values: scroll-padding-top can't do this */\n.overlap { scroll-margin-top: -8px; }

\n \n

No margin collapsing

Adjacent CSS margins collapse. scroll-margin values do not. Two adjacent sections each with scroll-margin-top: 40px each get the full 40px. Despite the name, these are scroll hints — not box-model margins.

Percentages fail silently. scroll-margin-top: 10% is a parse error. The browser ignores it. Length values only: px, rem, em.

\n\n \n

\n Decision Guide\n

Which one?

Three questions. First match wins.

\n\n

Do all your anchor targets need the same offset?

\n \n \n

→ scroll-padding-top on html

One declaration. Done. Tie it to a CSS custom property if nav height might change.

html { scroll-padding-top: var(--nav-height); }

→ scroll-margin-top per element

Set it on each target independently. The container stays untouched.

.sec-a { scroll-margin-top: 80px; }\n.sec-b { scroll-margin-top: 40px; }

\n\n

Do you need a negative offset?

\n \n \n

→ Must use scroll-margin-top

scroll-padding-top treats negatives as 0. scroll-margin-top accepts them.

→ Either works

Both properties behave correctly with positive values. Default to whichever fits question one.

\n\n

Is the target inside a nested scroll container?

\n \n \n

→ Apply to the inner container, or scroll-margin-top on the target

The browser scrolls the nearest scrollable ancestor. scroll-padding-top on html won't reach it.

→ scroll-padding-top on html

Standard case. One property, done.

\n\n

\n\n \n

\n Edge Cases & Gotchas\n

Things the docs gloss over

Click any row to expand.

\n\n

\n \n

scroll-margin-top adds no visible margin. scroll-padding-top adds no padding. Both are purely scroll-behavior directives. Neither shows up in the box model or DevTools layout panels.

\n \n

:root and html select the same element, but the property must target the scroll container context. Use the html type selector. :root silently fails.

\n \n

scroll-padding-top: 10% is valid. scroll-margin-top: 10% is a parse error the browser ignores silently. Length values only on scroll-margin: px, rem, em.

\n \n

If your sticky nav collapses on scroll, a hardcoded offset is wrong half the time. Store nav height in a CSS custom property, update it via JS, and reference the variable in your scroll offset property.

\n \n

If the target is inside a nested overflow: scroll container, the browser scrolls that container, not the page. scroll-padding-top on html has no effect. Apply it to the inner container, or put scroll-margin-top on the target.

\n \n

element.scrollIntoView({ block: 'start' }) respects scroll-margin-top on the target. Modern browsers also respect scroll-padding-top on the container. No JS offset math needed.

\n \n

Adjacent CSS margins collapse. Adjacent scroll-margin-top values do not. Each element gets its full declared offset when scrolled to.

\n \n

prefers-reduced-motion has no effect on either property. Do still set scroll-behavior: auto inside a reduced-motion query to disable the smooth animation separately.

\n\n

\n Browser Support\n \n \n \n \n \n \n \n \n

Browser	scroll-padding-top	scroll-margin-top
Chrome / Edge	✓ since 69 / 79	✓ since 69 / 79
Firefox	✓ since 68	✓ since 68
Safari	✓ since 14.1	✓ since 14.1
IE 11	✕	✕

Baseline since 2020. Ship it.

\n\n

\n\n\n\n\n

\n\n","scrollScripts",[205],"\n(function () {\n 'use strict';\n\n var root = document.getElementById('scroll-root');\n var toggler = document.getElementById('theme-toggle');\n\n // ── Theme ──\n function applyTheme(dark) {\n root.classList.toggle('dark', dark);\n toggler.setAttribute('aria-pressed', dark ? 'true' : 'false');\n window.__scrollLight = !dark;\n }\n applyTheme(window.__scrollLight === false);\n toggler.addEventListener('click', function () { applyTheme(!root.classList.contains('dark')); });\n\n // ── Scroll spy ──\n var spySecs = [['demo','nl-demo'],['context','nl-context'],['props','nl-props'],['decide','nl-decide'],['gotchas','nl-gotchas']];\n if (typeof IntersectionObserver !== 'undefined') {\n var spy = new IntersectionObserver(function (entries) {\n entries.forEach(function (e) {\n if (!e.isIntersecting) return;\n spySecs.forEach(function (s) {\n var l = document.getElementById(s[1]);\n if (l) l.classList.toggle('active', e.target.id === s[0]);\n });\n });\n }, { rootMargin: '-28% 0px -62% 0px', threshold: 0 });\n spySecs.forEach(function (s) { var el = document.getElementById(s[0]); if (el) spy.observe(el); });\n }\n\n // ── Scroll reveal ──\n var reveals = document.querySelectorAll('.reveal');\n if (typeof IntersectionObserver !== 'undefined') {\n var ro = new IntersectionObserver(function (entries) {\n entries.forEach(function (e) { if (!e.isIntersecting) return; e.target.classList.add('in'); ro.unobserve(e.target); });\n }, { threshold: 0.08 });\n reveals.forEach(function (el) { ro.observe(el); });\n } else {\n reveals.forEach(function (el) { el.classList.add('in'); });\n }\n\n // ── Copy buttons ──\n document.querySelectorAll('.copy-btn').forEach(function (btn) {\n btn.addEventListener('click', function () {\n var pre = btn.previousElementSibling;\n if (!pre) return;\n var text = pre.innerText || pre.textContent || '';\n if (navigator.clipboard) {\n navigator.clipboard.writeText(text).then(function () { flashCopy(btn); });\n } else {\n var ta = document.createElement('textarea');\n ta.value = text; ta.style.cssText = 'position:absolute;left:-9999px';\n document.body.appendChild(ta); ta.select();\n try { document.execCommand('copy'); flashCopy(btn); } catch (x) {}\n document.body.removeChild(ta);\n }\n });\n });\n function flashCopy(btn) {\n btn.innerHTML = '✓ Copied'; btn.classList.add('copied');\n setTimeout(function () { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);\n }\n\n // ── Tabs ──\n var tabBtns = Array.from(document.querySelectorAll('.tab-btn'));\n var tabPanels = Array.from(document.querySelectorAll('.tab-panel'));\n function selectTab(i) {\n tabBtns.forEach(function (b, j) { b.setAttribute('aria-selected', j === i ? 'true' : 'false'); });\n tabPanels.forEach(function (p, j) { p.setAttribute('aria-hidden', j === i ? 'false' : 'true'); });\n }\n tabBtns.forEach(function (btn, i) {\n btn.addEventListener('click', function () { selectTab(i); });\n btn.addEventListener('keydown', function (e) {\n if (e.key === 'ArrowRight') { e.preventDefault(); var n=(i+1)%tabBtns.length; selectTab(n); tabBtns[n].focus(); }\n if (e.key === 'ArrowLeft') { e.preventDefault(); var n=(i-1+tabBtns.length)%tabBtns.length; selectTab(n); tabBtns[n].focus(); }\n });\n });\n\n // ── Demo ──\n var ms = document.getElementById('mini-scroll');\n var status = document.getElementById('demo-status');\n var ruler = document.getElementById('offset-ruler');\n var OFFSET = 44;\n var currentMode = 'none';\n var prmq = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)');\n function smo() { return (prmq && prmq.matches) ? 'auto' : 'smooth'; }\n\n function setMode(mode) {\n currentMode = mode;\n\n document.querySelectorAll('.mode-btn').forEach(function (b) {\n var on = b.id === 'mode-' + mode;\n b.classList.toggle('on', on);\n b.setAttribute('aria-pressed', on ? 'true' : 'false');\n });\n\n ruler.classList.toggle('hidden', mode === 'none');\n\n if (mode === 'padding') {\n status.innerHTML = 'Mode: scroll-padding-top
On container: scroll-padding-top: ' + OFFSET + 'px';\n } else if (mode === 'margin') {\n status.innerHTML = 'Mode: scroll-margin-top
On each section: scroll-margin-top: ' + OFFSET + 'px';\n } else {\n status.innerHTML = 'Mode: No fix
Applied CSS: none';\n }\n }\n\n document.querySelectorAll('.mode-btn').forEach(function (b) {\n b.addEventListener('click', function () { setMode(b.id.replace('mode-', '')); });\n });\n\n // Jump buttons: scroll ONLY within the mini-scroll container.\n // scrollTo() doesn't respect scroll-padding-top or scroll-margin-top —\n // those only work with scrollIntoView() and native anchor nav.\n // So we apply the offset directly in the scroll math instead.\n document.querySelectorAll('.jump-btn').forEach(function (btn) {\n btn.addEventListener('click', function () {\n var targetId = btn.getAttribute('data-t');\n var target = document.getElementById(targetId);\n if (!target) return;\n\n // Walk offsetParent chain up to the scroll container\n var offsetTop = 0;\n var el = target;\n while (el && el !== ms) {\n offsetTop += el.offsetTop;\n el = el.offsetParent;\n }\n\n // When a fix is active, subtract OFFSET so the heading\n // clears the sticky nav — same effect as scroll-padding-top\n // or scroll-margin-top would produce in real anchor navigation.\n var scrollTop = (currentMode === 'none') ? offsetTop : offsetTop - OFFSET;\n ms.scrollTo({ top: Math.max(0, scrollTop), behavior: smo() });\n });\n });\n\n // ── Decision guide ──\n document.querySelectorAll('.dq-opt').forEach(function (btn) {\n btn.addEventListener('click', function () {\n var q = btn.getAttribute('data-q'), a = btn.getAttribute('data-a');\n document.querySelectorAll('.dq-opt[data-q=\"' + q + '\"]').forEach(function (s) {\n s.classList.remove('on'); s.setAttribute('aria-pressed', 'false');\n });\n btn.classList.add('on'); btn.setAttribute('aria-pressed', 'true');\n document.querySelectorAll('#dqa-' + q + '-yes, #dqa-' + q + '-no').forEach(function (el) { el.classList.remove('open'); });\n var ans = document.getElementById('dqa-' + q + '-' + a);\n if (ans) ans.classList.add('open');\n });\n });\n document.querySelectorAll('.dq-opts').forEach(function (grp) {\n grp.addEventListener('keydown', function (e) {\n var all = Array.from(grp.querySelectorAll('.dq-opt'));\n var i = all.indexOf(document.activeElement); if (i === -1) return;\n if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); all[(i+1)%all.length].focus(); }\n if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); all[(i-1+all.length)%all.length].focus(); }\n });\n });\n\n // ── Gotcha accordion ──\n document.querySelectorAll('.gotcha-trigger').forEach(function (btn) {\n btn.addEventListener('click', function () {\n var item = btn.closest('.gotcha-item');\n var open = item.classList.toggle('open');\n btn.setAttribute('aria-expanded', open ? 'true' : 'false');\n });\n });\n\n}());\n",{"_12":207,"_14":217},[208,211,214],{"_21":209,"_23":210},"Page","toolkit:scroll-margin-top-vs-scroll-padding-top",{"_21":212,"_23":213},"Post","post:337a80b7-1924-80f9-b1e1-c909d9217a74",{"_21":215,"_23":216},"Blocks","post:337a80b7-1924-80f9-b1e1-c909d9217a74:blocks",[],"actionData","errors"]

Your nav bar is eatingyour headings.

See it land

Same fix. Different owner.

The properties

Also moves snap points

No margin collapsing

Which one?

Things the docs gloss over

Building something that needs to scroll right?

Your nav bar is eating
your headings.

Related Items

HTML-in-Canvas.dev

Modal vs Modeless, an exploration

Defining: Modal vs Modeless

Designing: Modal vs Modeless

Learn Pretext

Mini Shai-Halud

AI Delivery Friction Finder

Claude and PowerBI