内联（水平轴）维度中元素的滚动边距由 CSS scroll-margin-inline 简写属性设置。
为了更轻松地将此框捕捉到 snapport，scroll-margin 值指定了定义滚动捕捉区域的输出。
此区域的计算方法是采用已修改的边框，找到其矩形边界框（与滚动容器的坐标空间对齐），然后添加所需的出口。
可能的值
- <length> - 从滚动容器的相应边缘开始的出口。
成分特性
此属性是以下 CSS 属性的简写：
适用于
所有元素
语法
scroll-margin-inline = <length>{1,2}
CSS scroll-margin-inline - 基本示例
以下示例演示了 scroll-margin-inline 属性的用法。
<html>
<head>
<style>
#demoScroll {
width: 90%;
aspect-ratio: 16/9;
padding: 20px;
margin: auto;
border: solid 3px #333;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.snap-block {
width: 99%;
height: 90%;
scroll-snap-align: start;
scroll-margin-inline: 5px;
border-radius: 10px;
background-color: #3498db;
display: inline-block;
margin-right: 20px;
}
.color-block:nth-child(2n) {
background-color: #27ae60;
}
.color-block:nth-child(3n) {
background-color: #f39c12;
}
.color-block:nth-child(4n) {
background-color: #e74c3c;
}
.color-block:nth-child(5n) {
background-color: #9b59b6;
}
</style>
</head>
<body>
<h3>scroll-margin-inline</h3>
<p>Scroll through the inline scrollable blocks.</p>
<div id="demoScroll">
<div class="snap-block"></div>
<div class="snap-block"></div>
<div class="snap-block"></div>
<div class="snap-block"></div>
<div class="snap-block"></div>
<div class="snap-block"></div>
<div class="snap-block"></div>
</div>
</body>
</html>
