大字体的跨度会在段落上产生很大的“段落后的空间”

Question

所以我制作了一个段落，其中包含不同字体大小的跨度（跨度中仅包含 60 像素的文本）。当谈到下一行时，它为第一行和第二行留出了很大的分隔空间。

span {
  color: var(--orange-yellow-crayola);
  display: inline-block;
  font-size: 60px;
  position: relative;
  font-family: GreatVibes-Regular;
  margin-top: -20px;
}

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

所以我尝试制作一个不同的 p 并调整页边距顶部，以便文本以正常距离分开。

但是当我尝试使其响应较小的屏幕设备时，跨度会随着 p 崩溃，因为“display:inblock;”。

你们有解决这个问题的办法吗？ （抱歉英语不好）

span {
  color: var(--orange-yellow-crayola);
  display: inline-block;
  font-size: 60px;
  position: relative;
  font-family: GreatVibes-Regular;
  margin-top: -20px;
}

<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 style="margin-top: -35px;">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>

Answer 1

您可以使用 CSS 选择器

:first-letter

代替

span

元素，并将第一个字母设置为

line-height: 0

:

p {
  padding-top: 1.5rem;
}

p:first-letter {
  color: red;
  line-height: 0;
  font-size: 3rem;
}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, assumenda? Reprehenderit culpa magni ratione. Tempora voluptatem quaerat deserunt laborum doloribus vero, velit neque commodi, facere eligendi, libero sequi reprehenderit delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, assumenda? Reprehenderit culpa magni ratione. Tempora voluptatem quaerat deserunt laborum doloribus vero, velit neque commodi, facere eligendi, libero sequi reprehenderit delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, assumenda? Reprehenderit culpa magni ratione. Tempora voluptatem quaerat deserunt laborum doloribus vero, velit neque commodi, facere eligendi, libero sequi reprehenderit delectus.</p>