CSS垂直对齐和基线位置

Question

我是 CSS 新手，最近阅读了规范，在理解 vertical-align 属性时遇到了一些问题。

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

上面的代码创建了 3 个 div，每个 div 包含 3 个空的内联框（spans）：

1. 在第一个 div 中，一切似乎都很好。所有 3 个跨度都与线框的基线对齐。
2. 在第二个 div 中，在我将第三个跨度的 vertical-align 属性设置为 top 后，前两个跨度向上移动。而且我从这里迷路了，我不明白为什么他们会根据什么规则被提升。
3. 第三个 div 更适合我。我将第一个跨度的vertical-align 属性设置为bottom，它会导致第二个跨度移动比第三个跨度略低（当足够放大时会注意到这一点）。李>

我可以在规范中找到以下内容，但 multiple solutions 到底是什么？任何人都可以更清楚地说明这一点吗？

In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.

我还创建了一个fiddle。如果您有兴趣，请在 Firefox 或 Chrome 中运行它。

Answer 1

vertical-align 主要用于inline 元素，例如img 标签，通常设置为vertical-align: middle; 以便在文本中正确对齐。

Demo（不使用vertical-align）

Demo 2（使用vertical-align）

好的，这就是vertical-align如何与middle的值一起工作的一般概念。

那么，首先让我们看看vertical-align 属性的有效值是什么。

^{致谢：Mozilla Developer Network}

现在，让我们一步一步解决您的疑问..

在第一个示例中，您认为一切都很好，但答案是否定的，您将line-height 应用于不同的span，但事实是line-height 实际上并没有按照您的想法应用。 ..

Line height is actually not getting applied

Make it inline-block and it will be applied

您可以阅读this 答案以获取更多信息，为什么在span 上使用line-height 是没用的。

---

继续您的第二个疑问，您在第一个 span 上有 line-height，第二个是 span，但不是第三个 span，所以这里发生了什么？由于span 是inline 与文本，无论如何line-height 不会在那里发挥作用，正如我之前解释的那样，它们很高兴与文本垂直对齐，而当您使用vertical-align: top; 时，它不会移动上面的其他两个框，而是对齐到文本的顶部。

See how the vertical-align: top; aligns at the top of the text

---

来到你的最后一个例子，在这里，第一个 span 元素与预期的非常 bottom 对齐，它是正确的，继续第二个，你说它稍微在 lower 比第三个，因为它根本没有对齐，line-height 是它使元素align 垂直center 并最后移动一点到top，它实际上与@ 对齐987654362@。

Lets make them inline-block and see how they actually behave..

所以我希望你明白这三个例子之间的区别，但是你有必要了解line-height属性和inline-block属性，也不要忘记参考我分享的答案。