含大字号span的段落间距异常及响应式排版问题求助

方案一：优化span对齐，保留单段落结构（推荐） #

核心思路是通过调整span的垂直对齐方式，避免inline-block撑大行高，同时给段落设置合理行高，不用拆分段落就能解决间距问题，自然也不会有小屏重叠的麻烦。

修改后的CSS：

span {
  color: var(--orange-yellow-crayola);
  font-size: 60px;
  font-family: GreatVibes-Regular;
  /* 让大字号span和普通文本基线对齐，避免撑大整行高度 */
  vertical-align: middle;
  /* 微调位置替代原有的margin-top负值 */
  position: relative;
  top: 8px;
}

/* 给段落设置合适行高，保证整体排版舒适 */
.intro-paragraph {
  line-height: 1.6;
  margin-left: -1px;
}

对应的HTML：

<p class="intro-paragraph">
  <span>I</span> 'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs. My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.
</p>

方案二：保留拆分段落，用媒体查询修复小屏重叠 #

如果一定要拆分两个段落，就针对小屏设备通过媒体查询重置负margin，避免内容重叠：

修改后的CSS：

span {
  color: var(--orange-yellow-crayola);
  display: inline-block;
  font-size: 60px;
  position: relative;
  font-family: GreatVibes-Regular;
  margin-top: -20px;
  /* 添加上下对齐，避免span和相邻文本错位 */
  vertical-align: middle;
}

.second-paragraph {
  margin-top: -35px;
}

/* 小屏设备（示例为768px以下）恢复正常段落间距 */
@media (max-width: 768px) {
  .second-paragraph {
    margin-top: 1rem;
  }
}

对应的HTML：

<p style="margin-left: -1px;">
  <span>I</span>'m Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
</p>
<p class="second-paragraph">I enjoy turning complex problems into simple, beautiful and intuitive designs. My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.
</p>

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