垂直对齐顶部不起作用？答案

【问题标题】：Vertical-align top not working?垂直对齐顶部不起作用？
【发布时间】：2017-07-24 18:45:02
【问题描述】：

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

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

为什么代码框不与周围的p框顶部对齐？

【问题讨论】：

*.com/questions/35529582/…
我还是不明白：根据您的链接，vertical-align 会影响我的代码标签内的内容/文本，对吧？但是如果我从上到下更改对齐方式，唯一移动的是周围 p 标签内的文本。这太令人困惑了，没有任何意义？

标签： html vertical-alignment

【解决方案1】：

第一个问题是你给代码标签的行高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;
}

这是给你的fiddle

【讨论】：

我现在已经了解 line-height 是如何工作的，并且在这个例子中这是一个问题，谢谢。我真的不明白为什么为了解释垂直对齐而编造那个例子的人把那个 line-height 放在那里。这完全把事情搞砸了。但是我不明白为什么在我的原始示例中将垂直对齐从“顶部”更改为“底部”会改变周围 p 框内的文本位置？
垂直对齐用于对齐容器内的元素，在您的情况下，主内的文本除了代码标签内的文本外具有正常的行高，这就是为什么当您使用底部对齐时，所有文本都是对齐的到它们父容器的底部，除了代码文本，因为它的行高比其他文本高 3 倍
“垂直对齐用于对齐容器内的元素” -> 那么为什么该选项不只影响代码框内的文本呢？我希望代码框内的文本（我用黑线包围）与顶部/底部 1px 黑线对齐？
由于这行 css line-height: 3em;
即使我去掉了行高，更改垂直对齐值仍然会更改超出其范围的文本的位置（p 标签内的文本，而不是代码标签内的文本）。我不明白为什么会这样

【解决方案2】：

这样就可以了：

#myid{
    border:1px solid black;
}

添加唯一的css选择器

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

【讨论】：