CSS Property: scroll-margin-block-start

The scroll-margin-block-start property defines the margin in the block direction between the snap position and the container. When the user stops scrolling, the content will automatically align itself, considering the specified distance between the start of the child element and the container edge. For this property to work properly, two things are required: both scroll-margin-block-start and scroll-snap-align properties must be set on the child elements, while the scroll-snap-type property must be set on the parent element.

EXAMPLE

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Example scroll-margin-block-start</title>
    <style>
        /* Main container */
        .scroll-frame {
            width: 400px;
            height: 300px;
            border: 5px solid black;
            margin: 50px auto;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
        }

        /* Color blocks */
        .block {
            width: 100%;
            height: 200px;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            scroll-snap-align: start;
        }

        /* Example A: without margin */
        .no-margin {
            background-color: #FF6B6B;
        }

        /* Example B: with margin */
        .with-margin {
            background-color: #4ECDC4;
            scroll-margin-block-start: 100px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center">Comparison of scroll-margin-block-start</h1>
    
    <div class="scroll-frame">
        <div class="block no-margin">No margin</div>
        <div class="block with-margin">With 100px margin</div>
        <div class="block no-margin">No margin</div>
        <div class="block with-margin">With 100px margin</div>
        <div class="block no-margin">No margin</div>
        <div class="block no-margin">No margin</div>
    </div>
    
    <div style="text-align: center; margin: 20px;">
        <p><strong>Instructions:</strong></p>
        <p>1. Slowly scroll down the frame.</p>
        <p>2. Notice how turquoise blocks stop 100px from the top.</p>
        <p>3. Red blocks stop right at the edge.</p>
    </div>
</body>
</html>

RESULT