这篇文章主要给大家介绍CSS设置自动滚动定位的间距的方法，文中有详细的代码示例和图文介绍，对大家的学习或工作有一定的价值,需要的朋友可以参考下
介绍两个和滚动定位相关的 CSS 属性：scroll-padding[1]和 scroll-margin[2]
在平时开发中，经常会碰到需要快速定位的问题，比如常见的锚点定位
...
...
...这样，在点击a标签时会自动定位到与之相对应的内容上，如下
但是，这种通过锚点触发的定位默认是紧贴滚动容器边缘的，如果一些定位元素，比如fixed定位的头部，就会出现被遮挡的情况，如下
可以看到，“示例”这个标题由于紧贴顶部，导致被sticky定位的头部遮住了。
那么，如何让自动定位时让目标元素预留出足够大的间距呢？
一、一行 CSS解决
没错，看似有些麻烦的问题其实可以通过一行 CSS 解决，那就是 scroll-margin[3] ，下面是 MDN 的介绍
scroll-margin属性的值代表用于将盒元素拖拽到显示区域的拖拽滚动区域的起点。拖拽滚动区域由是由转换后边框大小的盒元素决定的，它会找到盒元素的矩形边界（在滚动的容器的坐标空间轴上），并添加指定的起点。
这个描述很官方，有点不知道在说什么
以上就是CSS设置自动滚动定位的间距的方法的详细内容，更多请关注0133技术站其它相关文章！
