x
<html><head><style>#container { position: relative; width: 80%; aspect-ratio: 3/1; margin: auto; border: solid black 2px; overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory;}.blue { background-color: lightblue; width: 95%; aspect-ratio: 3/1;}.green { background-color: lightgreen; width: 80%; aspect-ratio: 4/1;}.blue, .green { margin: 2px; scroll-snap-align: end; scroll-margin-bottom: 20px;}</style></head><body><h3>CSS scroll-margin-bottom property.</h3><p>Scroll-margin-bottom property is set on the child elements, so that snap position on the bottom side is offset by a distance to the container.</p><div id="container"> <div class="blue"></div> <div class="green"></div> <div class="blue"></div> <div class="green"></div> <div class="blue"></div> <div class="green"></div> <div class="blue"></div>