垂直对齐的行为

Question

我得到了这段代码，我想知道为什么 vertical-align: bottom; 也会影响 .floating-box elemnets，即使它只为 .floating-box2

设置

另外，我在哪里可以了解到这种行为？到目前为止我找不到任何相关信息。

vertical-align: top

的定义

"Align the top of the element and its descendants with the top of the entire line." 所以它没有说明包含以前的类.

<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;


}

.floating-box2 {
    display: inline-block;
    width: 150px;
    height: 195px;
    margin: 10px;
    border: 3px solid #73AD21;
vertical-align: bottom;
}

.after-box {
    border: 3px solid red;
}
</style>
</head>
<body>

<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

</body>
</html>

问候

Answer 1

这个 wiki 页面提供了一些关于垂直对齐的信息属性:

https://www.w3.org/wiki/CSS/Properties/vertical-align

这是 CSS2 规范的 link。第 10.8 节介绍了垂直对齐：

https://www.w3.org/TR/CSS2/visudet.html

在我看来，您的 HTML 显示正常。与元素所在行框的 "baseline" 相比，分配给内联元素的垂直对齐属性控制该元素的对齐方式。

默认值为"baseline." "Baseline" 指的是文本似乎所在的行。 "Bottom" 指的是包含文本（包括下行）的框的底部。因此，对于您的内联块，基线将与底部相同。所以你的所有内联框（class floating-box 和 floating-box2）都具有相同的垂直对齐方式（通过你的 CSS 或通过默认值）。所以出现在一行中的所有行内框的底边都会对齐。

每个内联块中的文本都按应有的方式显示：内联块从上到下填充（就像任何其他块级元素一样）。 vertical-align 属性不控制具有属性的元素内文本的对齐方式； vertical-align 属性控制元素与属性相对于其 "container." 的对齐方式容器是 "line box,"，它是一个 CSS 结构用于将浏览器放置在一行中的所有元素分组。

这篇来自 Smashing Magazine 的文章可能会有所帮助：https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/

垂直对齐的行为

Behaviour of vertical align

html

css

vertical-alignment