Reduce gap between grid rows of text

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>

How can I move bottom and top vertically closer together?

I have tried

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

But nothing changes in any case

Answer 1

You can use line-height to reduce the space between them. If that's what you are looking for. ( reduce space is a vague request )

Check below to compare ( first items have line-height added )

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