CSS 高度 + 行高 + 字体大小

Question

我有一个简单的 div，我希望将 div 高度作为其内容字体大小。所以我尝试将高度、行高和字体大小设置为相同的值，但元素高度似乎不是预期的 150px。您可以在下面的屏幕上看到它。就是红框里的表头。

如何实现字体的高度与其框的高度一样？

Answer 1

所以问题是字体总是在上方和下方包含一些白色space。这是基于字体而不是在某处指定的。所以你最好的选择是使用正确的字体大小，然后将行高调整得更小，直到你得到想要的结果。

同一个问题可以得到答案here

删除顶部和底部的小技巧 space 是 here

Answer 2

您可以使用 CSS 尝试以下解决方案。

100px 是你想要的高度
1.45 必须针对每个字体系列进行更正。

HTML:

  <div class="container">   
      Whosebug  
  </div>

CSS:

.container {
  display: flex;
  align-items: center;
  background-color: #222222;
  color: #f7f7f7;
  text-transform: uppercase;
  height: 100px;  
  font-size: calc(100px * 1.45);  
}

测试link：https://codepen.io/shervinmr/pen/wvaaEvg

CSS 高度 + 行高 + 字体大小

CSS height + line-height + font-size

css

height

font-size