如何让绝对定位div内的文本对齐到左上角（不使用固定负边距）

问题根源在于：默认情况下文本对齐基于字体基线，且元素默认行高会在文本上下产生留白，导致文本无法紧贴div左上角。以下是两种适配动态字体大小的解决方案：

方案一：设置line-height为1 #

通过将容器的line-height设为1（相对于自身font-size的倍数），让行高与字体高度完全匹配，消除顶部留白：

.a {
  position: absolute;
  display: block;
  background-color: red;
  font-size: 50px;
  color: gold;
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 1; /* 关键：行高与字体大小一致 */
}
.b {
  background-color: blue;
  margin: 0;
  padding: 0;
}

<div class="a">
  <span class="b">Put Text At Top</span>
</div>

方案二：使用Flex布局 #

利用flex的对齐属性，强制内部元素顶到容器左上角，无需调整行高：

.a {
  position: absolute;
  display: flex; /* 改为flex布局 */
  align-items: flex-start; /* 垂直方向顶对齐 */
  background-color: red;
  font-size: 50px;
  color: gold;
  margin: 0;
  padding: 0;
}
.b {
  background-color: blue;
  margin: 0;
  padding: 0;
}

<div class="a">
  <span class="b">Put Text At Top</span>
</div>

两种方案都不需要固定负边距，能自动适配字体大小的变化。

内容的提问来源于stack exchange，提问作者Mark