CSS Property: scroll-margin-block

The scroll-margin-block property defines the margin between the snap position and the container in the block direction. This means that when scrolling stops, the scroll will quickly adjust and stop at a specified distance in the block direction between the snap position and the container. The scroll-margin-block property is a shorthand for scroll-margin-block-start and scroll-margin-block-end properties. The values for the scroll-margin-block property can be set in different ways.

If the property has two values: scroll-margin-block: 120px 200px;

The start margin is 120px.
The end margin is 200px.

If the property has one value: scroll-margin-block: 120px;

Both start and end margins are 120px.

To see the effect of the scroll-margin-block property, both scroll-margin-block and scroll-snap-align properties must be set on child elements, while the scroll-snap-type property must be set on the parent element.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scroll-margin-block Demonstration</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #333;
            color: white;
            padding: 1rem;
            z-index: 100;
        }

        nav {
            position: fixed;
            top: 60px;
            left: 0;
            right: 0;
            background: #4CAF50;
            padding: 1rem;
            z-index: 90;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 1rem;
        }

        main {
            color: #333333;
            margin-top: 120px; /* Space for header and nav */
            scroll-snap-type: y proximity;
        }

        section {
            min-height: 100vh;
            padding: 2rem;
            scroll-snap-align: start;
            border-bottom: 2px solid #ccc;
            position: relative;
        }

        /* Different scroll-margin-block examples */
        .no-margin {
            background-color: #ffcdd2;
            scroll-margin-block: 0;
        }

        .nav-margin {
            background-color: #c8e6c9;
            scroll-margin-block: 120px; /* Height of header + nav */
        }

        .large-margin {
            background-color: #bbdefb;
            scroll-margin-block: 200px;
        }

        /* Visual indicator for scroll-margin */
        .margin-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            border-top: 3px dashed rgba(0,0,0,0.3);
            padding: 5px;
            font-size: 0.8em;
            color: #666;
        }

        /* Additional styles for better readability */
        h2 {
            margin-top: 0;
        }

        .content {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>scroll-margin-block Demonstration</h1>
    </header>

    <nav>
        <a href="#section1">No margin</a>
        <a href="#section2">Standard margin</a>
        <a href="#section3">Large margin</a>
    </nav>

    <main>
        <section id="section1" class="no-margin">
            <div class="content">
                <h2>Section without margin</h2>
                <p>This section has no scroll-margin-block margin (value: 0).</p>
                <p>You will notice that the content hides under the navigation.</p>
            </div>
        </section>

        <section id="section2" class="nav-margin">
            <div class="margin-indicator">↕️ scroll-margin-block: 120px</div>
            <div class="content">
                <h2>Section with standard margin</h2>
                <p>This section has scroll-margin-block set to 120px, which equals the height of header and navigation.</p>
                <p>Content will always be visible below the navigation.</p>
            </div>
        </section>

        <section id="section3" class="large-margin">
            <div class="margin-indicator">↕️ scroll-margin-block: 200px</div>
            <div class="content">
                <h2>Section with large margin</h2>
                <p>This section has a larger scroll-margin-block (200px).</p>
                <p>You will notice a larger gap between the navigation and content when scrolling.</p>
            </div>
        </section>
    </main>
</body>
</html>

RESULT