Javascript 光滑滑块点和其他div之间的额外空间

我用的是滑头。滑块在滑块下占用了额外的空白。当我使用Chrome开发工具检查时，我发现这是因为光滑滑块的圆点。我已经在圆点上添加了自定义样式。不明白我为什么要面对这个问题！这是我的代码笔链接

Javascript

$(document).ready(function () {
            $('.slider').slick({
                autoplay: true,
                infinite: true,
                //              centerMode: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                //              centerPadding: '220px',
                dots: true,
                dotsClass: 'slick-dots',
                fade: true,

            });

        });

---

有3个元素的样式导致了间隙

中的

具有

页边距顶部

有一个

页边距底部

同时定义了

底部和
顶部

这些样式是从一个名为

slick-theme.css的外部css文件加载的

因此，请将以下内容粘贴到样式表的末尾

section#donate h3{
  margin-top: 0;
}

ul.slick-dots{
  bottom: 0;
}

section.slick-dotted.slick-slider{
  margin-bottom:0;
} 

并修改
部分的
页边距底部

.slick-dots {
    position: absolute;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 0px;
    list-style: none;
    list-style-type: none;
    text-align: center;
    margin-top: 40px;
}


这将在滑块下提供额外的空白：

.slick-dotted.slick-slider {
    margin-bottom: 30px; /* Should be removed */ 
}

另外，
h3
标记通常会给出
margin top
值，因此您可以通过以下方式消除它：

.container h3 {
  margin-top: 0;
}

解决了这个问题。谢谢你打断了我的每一个部分，让我更容易理解。谢谢！解决了这个问题。
.slick-dotted.slick-slider {
    margin-bottom: 30px; /* Should be removed */ 
}

.container h3 {
  margin-top: 0;
}