Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> /* Container to enable vertical scrolling */ .container { height: 500px; overflow-y: auto; border: 2px solid #333; padding: 10px; scroll-padding: 20px; /* Default padding on all sides */ } /* Basic styling for sections */ .section { height: 200px; margin-bottom: 20px; background-color: lightcoral; border: 2px solid darkred; display: flex; align-items: center; justify-content: center; font-size: 1.2em; } .section:nth-child(even) { background-color: lightblue; border-color: darkblue; } /* Custom scroll padding for specific sides */ .section-2 { scroll-padding-top: 50px; /* Adds 50px padding at the top when scrolled into view */ } .section-3 { scroll-padding-left: 30px; /* Adds 30px padding on the left */ scroll-padding-right: 40px; /* Adds 40px padding on the right */ scroll-padding-bottom: 25px; /* Adds 25px padding at the bottom */ } </style> </head> <body> <h2>CSS scroll-padding Properties Example</h2> <p>Scroll vertically to each section. Sections 2 and 3 have specific scroll paddings on different sides.</p> <!-- Vertical scroll container --> <div class="container"> <div id="section1" class="section">Section 1</div> <div id="section2" class="section">Section 2 (scroll-padding-top: 50px)</div> <div id="section3" class="section">Section 3 (scroll-padding-left: 30px; scroll-padding-right: 40px; scroll-padding-bottom: 25px)</div> <div id="section4" class="section">Section 4</div> </div> </body> </html>