使元素相互接触，没有垂直间隙

Question

我在网格中有一些元素。

但是我希望字母和数字相互接触。他们之间没有差距。

类似这样的东西：

此刻的代码看起来像这样：

在JSX中，但与HTML相同。

  <ul className='week-forecast-list'>
        <li className='week-forecast-item'>
          <h3 className='week-forecast-day'>
            {formatDateToDay(list[0].dt_txt)}
          </h3>
          <h4 className='week-forecast-temp'>
            {formatTemp(list[0].main.temp)}
            <span className='degrees-icon'>º</span>
          </h4>
          <p>{list[0].weather[0].main}</p>
</li>
</ul>

.week-forecast-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.week-forecast-item {
  border: 1px solid var(--darkish);
  display: flex;
  flex-direction: column;
}
.week-forecast-day {
  font-size: 8rem;
}
.week-forecast-temp {
  font-size: 8rem;
}

Answer 1

使用line-height属性

line-height: 0.75;