减少文本网格行之间的间隙

Question

.container {
display: inline-grid;
grid-template-rows: 1fr 1fr;
}
.top {
grid-row: 1;
font-size: 18px;
}

.bottom {
grid-row: 2;
font-size: 14px;
}

<span class="container">
<span class="top">Top</span>
<span class="bottom">Bottom</span>
</span>

如何将底部和顶部垂直移动到一起?

我试过了

• grid-gap: -10pxon.container
• height: calc(100% - 10px)on.bottom
• top: -10pxon.bottom

但是在任何情况下都没有改变

Answer 1

您可以使用line-height来减少它们之间的空间。如果这就是你想要的。(reduce space是一个模糊的请求)

检查下面的比较(第一个项目已添加行高)

.container {
display: inline-grid;
grid-template-rows: 1fr 1fr;
}
.top {
grid-row: 1;
font-size: 18px;
}

.bottom {
grid-row: 2;
font-size: 14px;
}
.top.custom {
line-height:18px;
}
.bottom.custom {
line-height:14px;
}

<span class="container">
<span class="top custom">Top</span>
<span class="bottom custom">Bottom</span>
</span>
<span class="container">
<span class="top">Top</span>
<span class="bottom">Bottom</span>
</span>

Answer 2

您可以在.bottom(负值)或.top(正值)上尝试translateY

.container {
display: inline-grid;
grid-template-rows: 1fr 1fr;
}
.top {
grid-row: 1;
font-size: 18px;
}

.bottom {
grid-row: 2;
font-size: 14px;
transform: translateY(-10px);
}

<span class="container">
<span class="top">Top</span>
<span class="bottom">Bottom</span>
</span>

.container {
display: inline-grid;
grid-template-rows: 1fr 1fr;
}
.top {
grid-row: 1;
font-size: 18px;
transform: translateY(10px);
}

.bottom {
grid-row: 2;
font-size: 14px;
}

<span class="container">
<span class="top">Top</span>
<span class="bottom">Bottom</span>
</span>

Answer 3

只需添加margin: top，这将让您减少差距

.container {
display: inline-grid;
grid-template-rows: 1fr 1fr;
}

.top {
font-size: 18px;
}

.bottom {
font-size: 14px;
margin-top: -10px;
}

<span class="container">
<span class="top">Top</span>
<span class="bottom">Bottom</span>
</span>