CSS scroll-margin-left property

src

Description

CSS scroll-margin-left property specifies margin at the left side of the scroll item.

Please move the scrollbar to see the effect of margin.

Syntax

scroll-margin-left :+ve length

Property values

+ve length Default

There is no margin at the left edge of the scroll item.

scroll-margin-left: 0px;

Try it

+ve length

100

It specifies the left edge margin of the scroll item.

In the demo, there is 100px margin at the left edge of the scroll item.

scroll-margin-left: 100px;

Try it

Applicable to

It applies to scroll containers.

Preview

Code

CSS

.img {
 width:296px;
 height:275px;
  border:2px solid yellow;
 scroll-snap-align: none end;
}
.photoGallery {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}

HTML

<div class="photoGallery">
<img class="img" src="img/img1.jpeg"/>
<img class="img" src="img/img2.jpg"/>
<img class="img" src="img/img3.jpg"/>
<img class="img" src="img/img4.jpg"/>
<img class="img" src="img/img5.jpg"/>
<img class="img" src="img/img6.jpg"/>
</div>

CSS3 Properties

Description

Syntax

Property values

Applicable to