CSS Property: scroll-margin-inline-start

The scroll-margin-inline-start property sets the distance in the inline direction between the snap position and the container. This means that when scrolling stops, the scroll will quickly adjust and stop at a specified distance in the inline direction between the snap position at the start of the child element and the container. To see the effect of the scroll-margin-inline-start property, both scroll-margin-inline-start 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">
    <title>scroll-margin-inline-start Example</title>
    <style>
        /* Main container */
        .scroll-container {
            width: 400px;
            height: 300px;
            border: 5px solid black;
            margin: 50px auto;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
            white-space: nowrap;
        }

        /* Color blocks */
        .block {
            width: 300px;
            height: 100%;
            font-size: 24px;
            display: inline-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-inline-start: 100px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center">scroll-margin-inline-start Comparison</h1>
    
    <div class="scroll-container">
        <div class="block no-margin">No start margin</div>
        <div class="block with-margin">With 100px start margin</div>
        <div class="block no-margin">No start margin</div>
        <div class="block with-margin">With 100px start margin</div>
        <div class="block no-margin">No start margin</div>
        <div class="block no-margin">No start margin</div>
    </div>
    
    <div style="text-align: center; margin: 20px;">
        <p><strong>Instructions:</strong></p>
        <p>1. Slowly scroll left and right in the frame</p>
        <p>2. Notice how turquoise blocks stop 100px from the left edge</p>
        <p>3. Red blocks stop right at the left edge</p>
    </div>
</body>
</html>

RESULT