如何像素完美地将文本对齐到 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>

Answer 2

尝试使用排版单元来定位它。例如，我在em 中使用了负边距来测试不同的字体大小。

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

#text {
  color: white;
  font-size: 60px;
  margin-top: -0.25em; /* Negative margins in typography Unit */
}

#container2 {
  position: absolute;
  background-color: black;
  width: 300px;
  height: 250px;
  margin-left: 350px;
}

#text2 {
  font-size: 30px; /* Half the font-size */
  color: white;
  margin-top: -0.25em;
}

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

<div id="container2">
  <div id="text2">hello world<br>how r u?</div>
</div>