CSS scroll-margin-inline property

Description

CSS scroll-margin-inline property specifies margin at the start and end sides of the scroll item. Please move the scrollbar to see the effect of margin.

The selection of start and end sides depends upon the writing-mode.

  • The start and end sides are left and right sides respectively for horizontal-tb writing-mode.

  • The start and end sides are top and bottom sides respectively for vertical-* writing-mode.

Syntax

scroll-margin-inline :+ve length

Property values

+ve length Default

There is no margin at the start and end edges of the scroll item.

scroll-margin-inline: 0px;

+ve length

It specifies the margin at the start and end edges of the scroll item.

In the demo, there is 100px margin at the start and end edges of the scroll item.

scroll-margin-inline: 100px;

Applicable to

It applies to scroll containers.

#CSS digger
Was this article helpful?

 
×

Ctrl+D