将 span 内的文本与容器顶部对齐答案

【问题标题】：Align text inside span to top of container将 span 内的文本与容器顶部对齐
【发布时间】：2017-07-02 04:36:09
【问题描述】：

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

在这里，您可以看到由于行高而产生的一些“填充”。有没有办法做到这一点？

.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>

【问题讨论】：

标签： html css text vertical-alignment

【解决方案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>

【讨论】：

【解决方案2】：

只有手动更改每个 html 标签的 line-height 才能实现您的要求。我想这正是您正在寻找的东西..

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

<body style="margin:0px;">
<div>
  <div class="ej ej1">
    <span class="name">
      <span class="firstname">Something Name</span>
    <span class="username">
        @somthig-name
        </span>
    </span>
  </div>
</div>
</body>

【讨论】：

【解决方案3】：

我认为问题在于<body> 的边距为 8px... 试试这个

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

<body style="margin:0px;">
<div>
  <div class="ej ej1">
    <span class="name">
      <span class="firstname">Something Name</span>
    <span class="username">
        @somthig-name
        </span>
    </span>
  </div>
</div>
</body>

【讨论】：

否则，如果您谈论的是文本本身，我相信这与字体本身有关，您必须创建一个字符上方绝对没有空格的字体。