Javascript 如何从引导容器中删除空白？

我有这个网站：出于某种原因，他们的容器中有很多空白。如何更改此元素的高度

我的html：

<center>
    <section class="blog-posts grid-system">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="all-blog-posts">
            <center>
              <div class="row">
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Fitness.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>Fitness</h4>
                      <ul class="post-info">
                        <li>Mohammad Al-Wazzan</li>
                        <li>3/11/2020</li>
                      </ul>
                    <div class="btn download" onclick="window.location='articlepdfs/Fitness.pdf';">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الأمير.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>الأمير الراحل … أمير الإنسانية</h4>
                      <ul class="post-info">
                        <li>Mohammad Al-Obaidi</li>
                        <li>3/10/2020</li>
                      </ul>
                    <div class="btn download" onclick="window.location='articlepdfs/الأمير الراحل … أمير الإنسانية.pdf';">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Uyghur.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>Uyghur Muslims</h4>
                      <ul class="post-info">
                        <li>Khalid Kooheji</li>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Uyghur Muslims.pdf';">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Corona.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                    <h4>Corona Virus: A New World</h4>
                      <ul class="post-info">
                        <li>Majed Al-Shaheen</li>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Corona Virus A New World.pdf';">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/اقرأ.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>التعلم عبادة</h4>
                      <ul class="post-info">
                        <li>Omar Sheir</li>
                        <li>23/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/التعلم عبادة.pdf';">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الصدقة.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>الصدقة</h4>
                      <ul class="post-info">
                        <li>Ahmad Al-Mazrouei</li>
                        <li>20/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الصدقة.pdf';">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              </center>
            </div>
          </div>
        </div>
      </div>
    </section>
    </center>

&emsp；
健身

穆罕默德·瓦赞
2020年11月3日

&emsp；
الأمير الراحل … أمير الإنسانية

穆罕默德·奥巴迪
2020年10月3日

&emsp；
维吾尔穆斯林

哈立德·库赫吉
2020年9月27日

&emsp；
冠状病毒：一个新世界

沙欣少校
2020年9月27日

&emsp；
التعلم عبادة

奥马尔·谢尔
2020年9月23日

&emsp；
الصدقة

艾哈迈德·马兹鲁伊
20/9/2020

---

我可以添加什么来降低高度？

顶部和底部都有边距和填充物。您可以尝试以下方法：

.blog-posts {
    margin-top: 0;
 }

.footer-distributed {
 background-color: #2c292f;
 box-sizing: border-box;
 width: 100%;
 text-align: left;
 font: bold 16px sans-serif;
 padding: 50px 50px 60px 50px;
 margin-top: 0;
}

---

哦，谢谢大家，我换了衣服就修好了

.blog-posts .down-content {
    padding: 0px;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    min-height: 45em;
}

到

---

在我的css文件中

您可以从使用浏览器中的检查器开始，查看它正在创建空白或不需要的高度的元素。。。然后你就可以知道哪些类正在应用它，就像我看到的一些元素有最小高度一样，从移除开始你有css文件吗？看看你的，有

。博客文章{margin top:100px；}

.blog-posts .down-content {
    padding: 0px;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    min-height: 35em;
}