p标签内span元素vertical-align:text-top无效，如何实现上下紧贴对齐？

要实现下方span顶部贴合上方span的基线（垂直紧密排列），可以通过以下方式调整：

核心问题分析 #

你当前用<br>换行，且<p>标签默认带有内外边距、行高，<span>作为行内元素，字体本身的行高和<br>的默认间距会导致元素间出现空隙，vertical-align对这种块级排列的元素无效。

解决方案代码 #

CSS 调整

p#highlighter {
  border: 5px solid black;
  color: black;
  font-family: tusker-grotesk;
  text-align: left;
  width: 50%;
  position: absolute;
  top: 6%;
  left: 2%;
  /* 清除p标签默认内外边距 */
  margin: 0;
  padding: 0;
  /* 使用flex垂直排列，消除默认间距 */
  display: flex;
  flex-direction: column;
  gap: 0;
}

p#highlighter span {
  /* 让span行高紧贴字体，消除内部空隙 */
  line-height: 1;
}

p#highlighter span#pos {
  color: #DE000D;
  font-size: 50px;
}

HTML 调整（移除<br>，flex布局会自动垂直排列元素）

<p id="highlighter">
  <span id="pos">POS</span>
  <span id="smaller">IS     AVAILABLE</span>
  <span id="here">HERE</span>
</p>

其他可选方案 #

如果不想使用flex布局，也可以将<span>设为块级元素，同时清除行高和间距：

p#highlighter {
  border: 5px solid black;
  color: black;
  font-family: tusker-grotesk;
  text-align: left;
  width: 50%;
  position: absolute;
  top: 6%;
  left: 2%;
  margin: 0;
  padding: 0;
  line-height: 1;
}

p#highlighter span {
  display: block;
  margin: 0;
  line-height: 1;
}

p#highlighter span#pos {
  color: #DE000D;
  font-size: 50px;
}

通过以上调整，就能让每个span的顶部精准贴合上方span的基线，实现垂直紧密排列的效果。

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