如何消除网格项目底部的多余空格？
我的CSS Grid项目底部有很多空白，我想弄清楚为什么。我将图像设置为容器高度的40％，该容器的高度设置为100％高度。我知道默认情况下，网格项目的高度（连续）是其内容的高度。如果隐式行中的所有项目仅跨越一行，那么对于我来说就是这样。
我如何使图像下面的部分仅占据下一次填充和其他填充所需的空间，而又不占更多空间？
.cards {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: min-content;
grid-gap: 1rem;
}
.card {
height: 100%;
border: 1px solid black;
}
.main-img {
display: block;
object-fit: cover;
height: 40%;
width: 100%;
}
.author-img {
display: none;
}<body>
<div class="cards">
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1554142918-2c055786cf67?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>The challenges & rewards of being vulnerable</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1553994535-aa6c2ee8cfc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>Content strategy best practices vs reality with Alex of Scripted</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1554283048-23c1133c646e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content"><h4>Blogging</h4>
<h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div></div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1554302006-5c11782b1f69?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>The challenges & rewards of being vulnerable</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1553586633-929ec02f4fb4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>Content strategy best practices vs reality with Alex Barron of Scripted</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
</div>
</body>
2 个答案:
答案 0 :(得分：2)
您需要在px or rem or em中将高度设置为40％，因为40％的计算方式有所不同，要进行响应，您可以使用% or vh，但是在px or rem or em中设置的高度更适合{ 1}}。
this.cards {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: min-content;
grid-gap: 1rem;
}
.card {
border: 1px solid black;
}
.main-img {
display: block;
object-fit: cover;
height: 15rem;
width: 100%;
}
.author-img {
display: none;
}
答案 1 :(得分：0)
如何使图像下面的部分仅占据下一个填充和其他填充所需的空间，而又不占更多空间？
图像后的网格项目是一个内部带有标题（h4）的div。该标题具有浏览器设置的默认顶部和底部边距。
使用h4 { margin-top: 0 }
.cards {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: min-content;
grid-gap: 1rem;
}
.card {
height: 100%;
border: 1px solid black;
}
.main-img {
display: block;
object-fit: cover;
height: 40%;
width: 100%;
}
.author-img {
display: none;
}
h4 {
margin-top: 0;
}<div class="cards">
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1554142918-2c055786cf67?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<!-- <h1>Alex</h1> -->
<div class="card-content">
<h4>Blogging</h4>
<h2>The challenges & rewards of being vulnerable</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1553994535-aa6c2ee8cfc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>Content strategy best practices vs reality with Alex of Scripted</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1554283048-23c1133c646e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1554302006-5c11782b1f69?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>The challenges & rewards of being vulnerable</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/fb0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1553586633-929ec02f4fb4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>Content strategy best practices vs reality with Alex Barron of Scripted</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
<article class="card">
<img class="main-img" src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
<div class="card-content">
<h4>Blogging</h4>
<h2>The selling 7: How to make amazing employee bio videos (+Examples)</h2>
<div class="metadata">
<img class="author-img" src="https://via.placeholder.com/1000x800/cf0" alt="">
<div>
<p class="author-name">By Alex</p>
<p class="article-date">on April 16th, 2019</p>
</div>
</div>
</div>
</article>
</div>
-
“块开始”是水平写入模式中的顶部。 “ inline-start”是文本开始的一侧。在LTR的左侧。 “ -end”是指相反的一侧。 source
-
要了解为什么
h4的上边距没有保留在父div内的原因，请阅读有关边距折叠的信息。看到这里：Why is an element with position: fixed moving with a non-positioned sibling?
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？