如何使用CSS向下调整文本位置？解决Hi文本因PNG间距过大问题

Hey there! Let's sort out that annoying spacing issue with your "Hi" text caused by the PNG image. The root problem here is that inline images default to aligning with the text baseline, which creates unexpected vertical spacing around your content. Here are a few simple CSS fixes you can implement right away:

1. 调整图片的垂直对齐方式 #

这是最快捷的修复方案——修改图片与文本的对齐方式，就能自动理顺"Hi"那一行的间距：

/* 定位h1内的图片 */
.content > h1 img {
  vertical-align: middle; /* 也可以试试bottom或top，根据你想要的效果调整 */
}

把图片的默认基线对齐改成middle、bottom或top，就能消除图片带来的额外空白，让"Hi"文本和其他内容自然贴合。

2. 给"Hi"单独加容器控制位置 #

如果你只想移动"Hi"文本（不想调整图片），可以给它套一个<span>标签，然后单独设置样式：

首先更新你的HTML：

<article id="main" class="content">
  <h1><span class="hi-line">Hi,</span> <br/> I'm <img src="../Sources/Untitled-2.png" alt="V">ictor, <br/> just another Video Editor. </h1>
</article>

然后添加CSS：

.content > h1 .hi-line {
  display: inline-block;
  margin-top: 12px; /* 调整这个数值，就能精准控制"Hi"下移的距离 */
}

把span设为inline-block后，就可以用margin/padding来控制它的垂直位置——只要微调margin-top，直到间距看起来完美就行。

3. 修改h1的行高 #

如果你想调整h1内所有行的整体间距，修改line-height也能间接让"Hi"下移：

.content > h1 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  line-height: 1.6; /* 增大这个数值，就能增加行与行之间的垂直空白 */
}

更高的行高会拉大每行文本的垂直间隙，自然会让"Hi"那一行相对于其他内容下移。

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