CSS scroll-margin

The scroll-margin property in CSS allows you to set the margin between an element and the edge of its scrolling container. This can be useful for creating spacing around elements that are being scrolled, preventing them from being too close to the edge of the container.

Let's see how the scroll-margin property works with some examples:

    .scroll-box {
      overflow: auto;
      scroll-margin: 20px;
    }
  

In this example, we have a .scroll-box element with a width of 200px and a height of 100px. The scroll-margin property is set to 20px, creating a margin of 20px around the element within its scrolling container.

    .scroll-box {
      overflow: auto;
      scroll-margin: 10%;
    }
  

In this example, the scroll-margin property is set to 10%, creating a margin that is 10% of the width of the scrolling container.

Play around with different values for the scroll-margin property to see how it affects the spacing around elements within scrolling containers!