Css 两个内部分区的垂直对齐不一致（由多选导致？）

有人能解释一下为什么本例中的第一个内部

与容器的顶部对齐，而第二个内部

与同一容器的底部对齐

我已经包括了下面的代码，它也在JSFiddle上

CSS:

HTML:

项目1
项目2
按项目查看

如果您想知道右手边的“线宽：29px”，那么这就是我的尝试（基于中的“方法2”），使复选框+标签与多选框的中间垂直对齐，我已经确定多选框的高度需要是29px（出于我在这里不详述的原因）

但是，如果我不能让这两个

首先相互对齐，那篇文章的建议对我没有好处

当然，我可以通过在右边的CSS中添加“position:relative；top:-3px”来使它们对齐，这是最令人反感的黑客行为

---

不过，作为一个权宜之计，直到我有一个正确的答案，我吞下我的骄傲，并这样做。但我更希望了解发生了什么（即，为什么multi-select会将左侧的

强制到容器顶部？），并使用这种理解以正确的方式解决问题。

只需将

垂直对齐：底部
添加到
div
即可：

div {                                                                          
   border: #000 1px solid;
   vertical-align: bottom;
}

小提琴：
只需将
垂直对齐添加到
。内部
：

.inner {                                                                       
    display: inline-block;        
    vertical-align: top;
} 


原因在于默认的
垂直对齐
是
基线
。对于非文本元素，这意味着在元素下方添加了一个小间隙，因为文本基线下方有空间，允许“g”和“y”等字母悬挂在基线下方。
好吧，比较它们的位置，一个有
行高，另一个不公平，对吗？因此，让我们也将相同的
行高度添加到第一个
div

现在您可以看到
select
元素下还有空间，第一个
div
实际上比第二个高，这是为什么？

嗯，因为
select
元素在文本基线上对齐，所以让我们用
vertical align:bottom
…来解决这个问题，两个div都有相同的高度，复选框和标签文本垂直居中于select:
对不起，这个解释对我来说没有意义：为什么会是“非文本元素”有像“g”和“y”这样的字母吗？毕竟，它不是文本。我在这里遗漏了什么？非文本元素根本没有字母。但它与“文本基线”保持一致，除非你改变它。之所以有空格，是因为在字母基线下方有空格。无论是否有字母，基线下总是有空格。好吧，你的答案似乎与@James Montagne的答案一致，但我必须说，我对断言“选择
元素与文本基线对齐”有问题。请参阅。在那里，添加了一些文本进行比较，几乎所有的样式都被撕掉了，
select
的底部比文本基线低3或4倍（事实上，它比所有的下降部分都低）。我很难接受你的任何一个答案，因为有一个非常明显的反例，@Hephaestus-你是对的。虽然给出的解释通常是正确的，但这并不是这种情况下的原因。不幸的是，对于不同的浏览器，情况是不同的。如果我们检查FF中的select元素，我们会发现它在默认情况下是对齐的
text-bottom
。因此，它与行框底部的文本对齐，而不是与其基线对齐。下面的间隙是由标签文本的下半部前导引起的，如果标签足够大，它会将标签底部推到行框文本底部下方。铬在另一种更难检查的环境中工作。
div {                                                                          
   border: #000 1px solid;
   vertical-align: bottom;
}

.inner {                                                                       
    display: inline-block;        
    vertical-align: top;
}