CSS 高度 + 行高 + 字体大小答案

【问题标题】：CSS height + line-height + font-sizeCSS 高度 + 行高 + 字体大小
【发布时间】：2020-02-11 18:44:48
【问题描述】：

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

如何实现字体与盒子高度一样高？

【问题讨论】：

标签： css height font-size

【解决方案1】：

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

同样的问题你可以得到here的答案

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

【讨论】：

所以字体大小对每个字体系列都是特定的，它与 css 的值不匹配。好的，谢谢。

【解决方案2】：

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

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

HTML：

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

CSS：

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

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

【讨论】：

如果我要求 css，请不要将 scss 拉到答案中。