Javascript 如何在垂直时间轴中将块移动得更近？

这里有一个很好的代码来创建一个垂直的时间线。我正在编辑它供我自己使用。然而，我尝试了很多，使它垂直更短，但失败了。我需要垂直向上移动这些块，这样它们可以填充线条的两侧，而不是在块的右侧或左侧有空白，并占据较小的垂直区域

如有任何建议，将不胜感激

jQuery（文档）.ready（函数（$）{
变量$timeline_block=$（'.cd timeline block'）；
//隐藏视口外部的时间线块
$timeline\u块。每个（函数（）{
如果（$（此）.offset（）.top>$（窗口）.scrollTop（）+$（窗口）.height（）*0.75）{
$（this）.find（'.cd timeline img，.cd timeline content'）.addClass（'is-hidden'）；
}
});
//在旋转时，在进入视口时显示/设置时间线块的动画
$（窗口）.on（'scroll'，function（）{
$timeline\u块。每个（函数（）{
if（$（this）.offset（）.top\u layout.scss
保证金：0自动；
&：：在{/*clearfix之后*/
内容：''；
显示：表格；
明确：两者皆有；
}
}
/* -------------------------------- 
主要成分
-------------------------------- */
标题{
高度：200px；
线高：200px；
文本对齐：居中；
背景：$color-1；
h1{
颜色：$color-3；
@包括字体大小（18px）；
}
@包括MQ（L）{
高度：300px；
线高：300px；
h1{
@包括字体大小（24px）；
}
}
}
#cd时间表{
位置：相对位置；
填充：2em 0；
保证金：{
顶部：2米；
底部：2米；
}
&：：之前{
/*这是垂直线*/
内容：''；
位置：绝对位置；
排名：0；
左：18px；
身高：100%；
宽度：4px；
背景：深色（背景，5%）；
}
@包括MQ（L）{
保证金：{
顶部：3em；
底部：3em；
}
&：：之前{
左：50%；
左边距：-2px；
}
}
}
.cd时间表块{
位置：相对位置；
利润率：2米0；
@包括clearfix；
&：第一个孩子{
边际上限：0；
}
&：最后一个孩子{
页边距底部：0；
}
@包括MQ（L）{
保证金：4em0；
&：第一个孩子{
边际上限：0；
}
&：最后一个孩子{
页边距底部：0；
}
}
}
.cd时间表img{
位置：绝对位置；
排名：0；
左：0；
宽度：40px；
高度：40px；
边界半径：50%；
盒影：0 0 0 4px$color-3，插入0 2px 0 rgba（#000.08），0 3px 0 4px rgba（#000.05）；
img{
显示：块；
宽度：24px；
高度：24px；
位置：相对位置；
左：50%；
最高：50%；
左边距：-12px；
边缘顶部：-12px；
}
&.cd图片{
背景：$color-4；
}
&.cd电影{
背景：$color-2；
}
&.cd位置{
背景：$color-5；
}
@包括MQ（L）{
宽度：60px；
高度：60px；
左：50%；
左边距：-30px；
/*WebKit中的强制硬件加速*/
-webkit转换：translateZ（0）；
-webkit背面可见性：隐藏；
.cssanimations&.已隐藏{
可见性：隐藏；
}
.cssanimations和.bounce in{
能见度：可见；
@包括动画（cd-bounce-1.6s）；
}
}
}
@包括关键帧（cd-bounce-1）{
0% {
不透明度：0；
@包括变换（比例（.5））；
}
60% {
不透明度：1；
@包括变换（比例（1.2））；
}
100% {
@包括变换（比例（1））；
}
}
.cd时间表内容{
位置：相对位置；
左边距：60像素；
背景：$color-3；
@包括边界半径；
填充：1em；
盒影：0.3px0暗（背景，5%）；
@包括clearfix；
氢{
颜色：$color-1；
}
p、 .cd读取更多信息，.cd日期{
@包括字体大小（13px）；
}
.cd读取更多信息，.cd日期{
显示：内联块；
}
p{
利润率：1米0；
线高：1.6；
}
.cd阅读更多{
浮动：对；
填充：.8em 1em；
背景：链接；
颜色：$color-3；
@包括边界半径；
.无需触摸&：悬停{
背景色：浅色（$link，5%）；
}
}
.cd日期{
浮动：左；
填充：.8em 0；
不透明度：.7；
}
&：：之前{
内容：''；
位置：绝对位置；
顶部：16px；
右：100%；
身高：0；
宽度：0；
边框：7px实心透明；
右边框：7px纯色$color-3；
}
@包括MQ（M）{
氢{
@包括字体大小（20px）；
}
p{
@包括字体大小（16px）；
}
.cd读取更多信息，.cd日期{
@包括字体大小（14px）；
}
}
@包括MQ（L）{
左边距：0；
填充：1.6em；
宽度：45%；
&：：之前{
顶部：24px；
左：100%；
边框颜色：透明；
左边框颜色：$color-3；
}
.cd阅读更多{
浮动：左；
}
.cd日期{
位置：绝对位置；
宽度：100%；
左：122%；
顶部：6px；
@包括字体大小（16px）；
}
.cd时间线块：第n个子项（偶数）和{
浮动：对；
&：：之前{
顶部：24px；
左：自动；
右：100%；
边框颜色：透明；
右边框颜色：$color-3；
}
.cd阅读更多{
浮动：对；
}
.cd日期{
左：自动；
右：122%；
文本对齐：右对齐；
}
}
.cssanimations&.已隐藏{
可见性：隐藏；
}
.cssanimations和.bounce in{
能见度：可见；
@包括动画（cd-bounce-2.6s）；
}
}
}
@包括MQ（L）{
/*偶数内容块上的反向反弹效果*/
.cssanimations.cd时间线块：第n个子项（偶数）。cd-timeline-content.bounce-in{
@包括动画（cd-bounce-2-inverse.6s）；
}
}
@包括关键帧（cd-bounce-2）{
0% {
不透明度：0；
@包括转换（translateX（-100px））；
}
60% {
不透明度：1；
@包括变换（translateX（20px））；
}
100% {
@包括变换（translateX（0））；
}
}
@包括关键帧（cd-bounce-2-REVERSE）{
0% {
不透明度：0；
@包括变换（translateX（100px））；
}
60% {
不透明度：1；
@包括转换（translateX（-20px））；
}
100% {
@包括变换（translateX（0））；
}
}

第1节的标题
知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利

1月14日
第2节的标题
第二条公共财产所有权，由精英继承。第二条公共财产所有权，第三条公共财产所有权