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