Free CSS Scroll Margin Generator
Create scroll-margin values with our free tool. Fix anchored navigation with fixed headers.
- Scroll margin values
- Fixed header demo
- Multiple direction control
- Snap area adjustment
- Browser support info
Frequently Asked Questions
What problem does scroll-margin solve?
When you have a fixed header and click an anchor link, the target scrolls to the top but is hidden behind the header. scroll-margin adds offset so content is visible.
How much scroll-margin should I use?
Set it equal to or slightly more than your fixed header height. scroll-margin-top: 80px for a 70px header gives 10px extra breathing room.
What's the difference from scroll-padding?
scroll-margin is on the target element (what you scroll to). scroll-padding is on the scroll container. Both create offset; use whichever fits your architecture.