Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> /* Container to enable horizontal scrolling */ .container { width: 100%; height: 300px; overflow-x: auto; border: 2px solid #333; padding: 10px; scroll-padding-inline: 40px; /* Default inline padding for both left and right */ display: flex; gap: 20px; } /* Basic styling for sections */ .section { width: 300px; height: 250px; background-color: lightcoral; border: 2px solid darkred; display: flex; align-items: center; justify-content: center; font-size: 1.2em; flex-shrink: 0; /* Prevent sections from shrinking */ } .section:nth-child(even) { background-color: lightblue; border-color: darkblue; } /* Custom scroll padding for specific sections */ .section-2 { scroll-padding-inline-start: 60px; /* Adds 60px padding on the left when scrolled into view */ } .section-3 { scroll-padding-inline-end: 50px; /* Adds 50px padding on the right when scrolled into view */ } </style> </head> <body> <h2>CSS scroll-padding-inline Properties Example</h2> <p>Scroll horizontally to each section. Sections 2 and 3 have specific inline scroll paddings on the left and right.</p> <!-- Horizontal scroll container --> <div class="container"> <div id="section1" class="section">Section 1</div> <div id="section2" class="section section-2">Section 2 (scroll-padding-inline-start: 60px)</div> <div id="section3" class="section section-3">Section 3 (scroll-padding-inline-end: 50px)</div> <div id="section4" class="section">Section 4</div> </div> </body> </html>