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个空的内联框（span）：

1. 在第1区，一切似乎都很好。所有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答案，了解有关在line-height上使用span无效的原因。

---

继续你的第二个疑问，你在line-height开始span，第二个span而不是第三个span，那么这里发生了什么？由于span与文本inline一致line-height不会像我之前解释的那样扮演角色，所以他们很乐意与文本垂直对齐，而当你使用{{1它不会移动上面的其他两个框，而是与文本的顶部对齐。

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

---

来到你的最后一个例子，在这里，第一个vertical-align: top;元素与预期的span对齐，好吧正确，继续到第二个，你说它稍微在< em> lower 比第三个，因为它根本没有对齐，bottom是它使line-height元素align垂直center和最后一个，移动到{ {1}}，与top实际上对齐。

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

所以我希望你们在这三个例子之间有所区别，但是你们必须理解top属性和line-height属性，也不要忘记参考答案我共享。