Html 垂直对齐顶部不工作？

#myid{
边框：1px纯黑；
}
#myid代码{
边框：1px纯黑；
字号：1.5em；
线高：3em；
垂直对齐：顶部；
}

试图更好地理解垂直对齐

第一个问题是您给代码标签指定了3em的行高，这是不必要的，我已经编辑了您的代码，请参见下文

HTML

<main>
    <p id="myid">trying to understand <code>vertical-align</code> better.</p>
</main>

CSS

#myid{
    border:1px solid black;
    padding: 20px;
    line-height: 100%;
}

#myid code {
    border:1px solid black;
    font-size: 1.5em;
    vertical-align:top;
}

---

这是一个给你的

像这样制作的产品，它可以工作：

#myid{
    border:1px solid black;
}

添加唯一的css选择器

#myid code {
    border:1px solid black;
    font-size: 1.5em;
    vertical-align:super;
}

---

我还是不明白：根据你的链接，垂直对齐会影响代码标记中的内容/文本，对吗？但是如果我从上到下改变对齐方式，唯一会移动的就是周围p标记中的文本。这太令人困惑了，没有任何意义？我现在已经理解了线高度是如何工作的，在这个例子中这是一个问题，谢谢。我真的不明白为什么那些为了解释垂直对齐而制作这个例子的人会把线的高度放在那里。那完全把事情搞砸了。但是，我不明白为什么在我的原始示例中，将垂直对齐从“顶部”更改为“底部”会更改周围p框内文本的位置？垂直对齐用于对齐容器内的元素，在您的情况下，main内的文本除了代码标记内的文本外，具有正常的行高，这就是为什么在使用“对齐底部”时，除了代码文本之外，所有文本都与其父容器的底部对齐，因为它的行高是其他文本的3倍“垂直对齐用于对齐容器内的元素”->，所以为什么该选项不仅影响代码框内的文本？由于这行css

行高：3em，我希望代码框内的文本（我用一条黑线包围）与顶部/底部1px黑线对齐即使我去掉了行高，更改垂直对齐值仍然会更改超出其范围的文本的位置（p标记内的文本，而不是代码标记内的文本）。我不明白为什么会这样