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

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: -10px 在 .container
height: calc(100% - 10px) 在 .bottom
top: -10px 在 .bottom

但无论如何都没有改变

Answer 1

您可以在 .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 2

您可以使用line-height来减少它们之间的space。如果这就是你要找的。（ 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 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>

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

Reduce gap between grid rows of text

html

css

css-grid