Demo: CSS scroll-margin-block-end

<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Scroll Margin Block End Example</title>
    <link rel='stylesheet' href='styles.css'>
</head>
<body>
    <div class='container'>
        <h1>Scroll Margin Block End Example</h1>
        <div class='spacer'>Scroll down for the content</div>
        <div class='section' id='section1'>Section 1</div>
        <div class='section' id='section2'>Section 2</div>
        <div class='section' id='section3'>Section 3</div>
    </div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.spacer {
    height: 100vh;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section {
    height: 100vh;
    background-color: #4CAF50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    scroll-margin-block-end: 50px; /* This creates space below the section when scrolled into view */
}

#section1 {
    background-color: #2196F3;
}

#section2 {
    background-color: #FF9800;
}

#section3 {
    background-color: #F44336;
}

// No JavaScript required for this demo