CSS高度+行高+字体大小

Question

我有一个简单的div，我希望将div高度作为其内容的字体大小。因此，我尝试将height，line-height和font-size设置为相同的值，但似乎元素高度预计不会达到150px。您可以在下面的屏幕上看到它。它是红色框中的标题。

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

Answer 1

因此问题是，字体始终在上下两个空格处包含空格。这基于字体，未在某处指定。因此，最好的选择是使用正确的字体大小，然后将lineheight调整为较小，直到获得所需的结果。

对相同问题的答案可以得到here

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

Answer 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