html - 将跨度内的文本与容器顶部对齐

Question

有没有办法让文本从其跨度的最顶部边界开始？

在这里您可以看到由于行高而有一点“填充”。 有办法做到吗？

.name {
  display: inline-block;
  line-height: 1.25;
  font-size: 45px;
}
.firstname {
  display: block;
  background: #FFAACC;
  margin-bottom: 5px;
}

<div>
  <div class="ej ej1">
    <span class="name">
      <span class="firstname">Something Name</span>
    <span class="username">
        @somthig-name
        </span>
    </span>
  </div>
</div>

Answer 1

不确定“由于行高而产生的少量“填充””是什么意思。 这是我对这个难题的看法。

body {
  margin:0;
  padding:0;
}
.name {
  margin-top:-0.9rem;
  display: inline-block;
  line-height: 1.25;
  font-size: 45px;
}
.firstname {
  display: block;
  background: #FFAACC;
  margin-bottom: 5px;
}

<div>
      <div class="ej ej1">
        <span class="name">
          <span class="firstname">Something Name</span>
        <span class="username">
            @somthig-name
            </span>
        </span>
      </div>
    </div>