docs(css): add scroll-padding example for fixed header

[lucifer13598]

Description

Added a new example to the scroll-padding documentation demonstrating how it prevents content from being hidden behind a fixed-position header.

Motivation

The existing documentation explained the concept but did not include a practical example. This change helps readers clearly understand a common real-world use case when using fragment links with fixed headers.

Additional details

No additional references required.

Related issues and pull requests

Fixes #42183

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/Reference/Properties/scroll-padding

Flaws (11)

URL: /en-US/docs/Web/CSS/Reference/Properties/scroll-padding
Title: scroll-padding
Flaw count: 11

• broken_links:
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets is a redirect
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets is a redirect
  • Link /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#curly_braces is a redirect
  • Link /en-US/docs/Web/CSS/length is a redirect
  • and 2 more flaws omitted
• macros:
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Inheritance which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
  • Macro cssinfo produces link /en-US/docs/Web/CSS/CSS_animated_properties which is a redirect

(comment last updated: 2026-01-04 17:41:51)

[chrisdavidmills]

Hi there @lucifer13598, and thank you for your contribution to MDN.

I had a few comments for you; let me know what you think of them.

[chrisdavidmills]

This entire section needs to be moved above the "Specifications" section.

[chrisdavidmills]

Suggested change

	A common use case for `scroll-padding` is when a page includes a fixed-position header.
	A common use case for `scroll-padding` is to prevent scrolling content from being hidden by a fixed-position header. This example demonstrates how to use `scroll-padding` for this purpose.

[chrisdavidmills]

Suggested change

Without `scroll-padding`, content linked via fragment identifiers can be hidden beneath the header.

[chrisdavidmills]

As it stands, this doesn't really demonstrate the use case very clearly. Can you expand the example to show more complete code and a live example perhaps? It doesn't have to be as elaborate as this example, but this is the kind of pattern you should ideally follow: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-target-group#basic_scroll-target-group_usage.