CSS scroll-margin-inline-start 属性

CSS scroll-margin-inline-start 属性为块级元素创建了一个可滚动框的区域，使文本离边界有一个额外的保留空间。该属性定义了区域开头文本的内部间距，以使文本不会堆叠在容器的边缘上，即避免文本像在容器边缘上一样紧密堆叠。该属性仅在沿着主轴滚动的块级元素上生效。

语法

scroll-margin-inline-start: <length> | auto;

• length：指定额外的内边距长度，可以是一个具体的长度值，如"10px"，也可以是一个百分比，亦或是一个em单位。默认值为0。
• auto：浏览器会自行计算内边距的大小，默认值为auto。

属性值

该属性的取值包括： 和 auto。

• ：指定内边距的具体长度值，例如px，em等。
• auto：浏览器自动计算内边距的大小。

示例

div {
  width: 200px;
  height: 100px;
  overflow: auto;
  scroll-margin-inline-start: 20px;
}

在上述示例中，我们定义了一个200像素宽、100像素高的div，并设置了overflow为自动滚动，最后我们在其中应用了scroll-margin-inline-start属性并设置其值为20像素。这样，当滚动到顶部时，文本距离容器的左边缘会有一个20像素的内边距。

浏览器支持

该属性得到了所有现代浏览器的支持，并被包括在CSS Scroll Snap 1中。

总结

CSS scroll-margin-inline-start 属性为滚动容器提供了一个内边距，使文本避免在容器边缘紧密堆叠。使用该属性，我们可以轻松实现更好的滚动体验。