HTML/CSS 仅垂直移动段落/标题中的部分文本

Question

我想在这里做的只是向上移动我的标题文本的一部分，不是整个段落/标题，我希望两者在同一行上(或者至少看起来是).

我有的是这个。

我要的是这个(注意只有“The”上移了)。

我的代码如下:

<h1>
    <a href="index.php"><span style="font-size:x-large; font-weight:bold;margin-top:-15px;"><b>T</b>he</span><span style="color:red;font-weight:bold">H</span>allowed <span style="color:red;font-weight:bold">H</span>og</a>
</h1>

注意“margin-top:-15px;”似乎没有做任何事情。

Answer 1

像这样的东西，虽然你需要调整垂直对齐:

a { text-decoration: none; color: gray }
.the {  font-size:x-large; font-weight:bold;  vertical-align: 17%; }
.rest { font-size: xx-large; }
.rest b { color: red; }

<h1>
    <a href="index.php">
      <span class='the'><b>T</b>he</span>
      <span class='rest'><b>H</b>allowed <b>H</b>og</span>
    </a>
</h1>