CSS：“行内块”的意外垂直位置元素 [英] CSS: unexpected vertical position of "inline-block" elements
问题描述
请考虑以下HTML代码：
Please consider the following HTML code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>test</title>
<style>
.section {
display: inline-block;
border: 1px dashed blue;
}
.outer {
border: 1px dashed red;
margin: 10px;
}
</style>
</head>
<body>
<div style="height: 500px; width: 200px;" class="section">a
<div style="height: 100px;" class="outer">1A<br />1B</div>
</div>
<div style="height: 500px; width: 200px;" class="section">b
<div style="height: 200px;" class="outer">2</div>
<div style="height: 200px;" class="outer">3<br />4<br />5</div>
</div>
</body>
</html>
由于类.section的两个div都是相同的高度，并且是inline-将期望它们都是垂直对齐的。然而，这些div中的第一个被按下，使得文本1B与来自其他部分的文本行5对齐。在任何一个div中添加或删除线都会对我的第一部分的垂直位置产生直接影响。
Since both divs with class ".section" are the same height, and are inline-blocks, I would expect them to be both vertically aligned. However, the first of these divs is pushed down, so that the text "1B" is aligned with the text line "5" from the other section. Adding or removing lines in either div has a direct impact on the vertical position of my first section.
我看不到这个逻辑，我不能在官方的CSS3文档中找到答案。然而，它似乎并不是一个错误，因为它是相同的Chrome 8，Safari 5，Opera 9.5和Firefox 4 beta ...没有尝试IE，因为它不是一个参考。
I don't see the logic of this, and I can't find the answer in the official CSS3 documentation either. Yet, it does not seem to be a bug, as it's identical in Chrome 8, Safari 5, Opera 9.5 and Firefox 4 beta ... didn't try IE, since it's not a reference anyway.
我在寻找这种现象的理性解释。当然有几个解决方法（例如，将inline-block改为inline-table修复问题，或者我可以使用正常的浮动块等等）。但我想了解这种行为。
I'm looking for a rational explanation for this phenomenon. Of course there are several workarounds (e.g. changing inline-block to inline-table fixes the problem, or I could use normal floating blocks, etc ...). However I'm trying to comprehend this behaviour.
希望有人比我自己更聪明，可以解释这一点。
Hopefully there is someone wiser than myself out there who can explain this.
直播示例此处。
推荐答案
CSS中 vertical-align 的默认值为 baseline 。这意味着第一部分（1B）中最后一个文本的基线与第二部分（5）中最后一个文本的基线对齐 - 以及任何周围文本的基线任何。
The default value for vertical-align in CSS is baseline. This means that the baseline of the last text in the first section ("1B") is lined up with the baseline of the last text in the second section ("5") - and also with the baseline of any surrounding text if you had any.
如果您向添加一个显式 vertical-align：bottom;
See http://www.brunildo.org/test/inline-block.html for a demonstration of how vertical-align applies to inline blocks
这篇关于CSS：“行内块”的意外垂直位置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
