CSS 属性 scroll-margin-block 是一个简写属性，用于控制块轴（大多数情况下为垂直轴）处滚动捕捉区域的边距。它定义了 snapport 的 snapport 边缘和 snapport 的滚动容器框之间的边距。
可能的值
- <length> - 从滚动容器的相应边缘开始的出口。
成分特性
此属性是以下 CSS 属性的简写：
适用于
所有元素
语法
CSS scroll-margin-block - 基本示例
以下示例演示了 scroll-margin-block 属性的用法。
CSS 属性 scroll-margin-block 是一个简写属性，用于控制块轴（大多数情况下为垂直轴）处滚动捕捉区域的边距。它定义了 snapport 的 snapport 边缘和 snapport 的滚动容器框之间的边距。
此属性是以下 CSS 属性的简写：
所有元素
scroll-margin-block = <length>{1,2}以下示例演示了 scroll-margin-block 属性的用法。
<html>
<head>
<style>
#demoScroll {
width: 75%;
aspect-ratio: 16/9;
padding: 20px;
margin: auto;
border: solid 3px #ddd;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.snap-block {
width: 80%;
aspect-ratio: 4/3;
scroll-snap-align: start none;
scroll-margin-block: 40px;
}
.blue { background-color: #3498db; }
.green { background-color: #2ecc71; }
.yellow { background-color: #f1c40f; }
.red { background-color: #e74c3c; }
</style>
</head>
<body>
<h3>scroll-margin-block</h3>
<p>Scroll through the colorful blocks.</p>
<div id="demoScroll">
<div class="snap-block blue"></div>
<div class="snap-block green"></div>
<div class="snap-block yellow"></div>
<div class="snap-block red"></div>
</div>
</body>
</html>
