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

Question

我有这个网站： https : //acanhs.org/nhs-articles.html出于某种原因，它们的容器中有很多空白区域。 如何更改此元素的高度。

我的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>

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

Answer 1

顶部和底部都有边距和填充。你可以试试这些：

.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;
}

Answer 2

哦，谢谢大家，我通过更改修复了它

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

到

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

在我的 css 文件中