html - 如何像素完美对齐文本到 div 的顶部？

Question

我正在尝试调整文本以准确对齐 div 的顶部，以便最高字符的顶部“接触”div 的顶部。我需要一个可扩展的解决方案，无论具体大小如何，它可以包括 CSS 和 JS 操作/计算。我知道表格、表格单元格和垂直对齐，但这些仍然不能将文本准确移动到顶部。

这是一个例子:https://codepen.io/saar62097/pen/MMLmyr

#container {
  position: absolute;
  background-color: black;
  width: 300px;
  height: 250px;
}

#text {
  color: white;
  font-size: 60px
}

<div id="container">
  <div id="text">hello world<br>how r u?</div>
</div>

我希望文本“触及”div 的顶部。有任何想法吗？谢谢!

Answer 1

我添加了一个 line-height 并对其进行了更改，直到它与“touching”div 边距相匹配。因为 top: 0; 不适用于文本。

#container{
  position: absolute;
  background-color: black;
  width: 300px;
  height: 250px;
  padding: 0;
}

#text{
  top: 0;
  color: white;
  padding: 0;
  font-size: 60px;
  line-height: 43px;
}

<div id="container">
  <div id="text">hello world<br>how r u?</div>
</div>