我有这个网站: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">
 
<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">
 
<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">
 
<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">
 
<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">
 
<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">
 
<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>我可以添加什么来降低height?.
发布于 2020-10-14 23:55:54
您在顶部有页边距和填充,down.You可以尝试这些:
.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;
}发布于 2020-10-14 23:56:32
哦,谢谢大家,我已经改好了
.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文件中
https://stackoverflow.com/questions/64357039
复制相似问题