为什么此内联块元素具有未垂直对齐的内容

Question

遇到了一个奇怪的CSS问题.有人可以解释为什么有内容的盒子没有垂直对齐？

如果您将文本放在带有类的范围内.divPutTextToFixIssue- 它会正确对齐.

http://jsfiddle.net/KgqJS/88/

   #divBottomHeader {
        background-color: #d5dbe0;
        height: 43px;
    }
    .divAccountPicker {
        display: inline-block;
        background: blue;            
        width: 200px;
        height: 40px;
    }
    .divAccountData {
        display: inline-block;
        background: red;
        width: 400px;
        height: 40px;
    }

<div id="divBottomHeader">
        <div class="divAccountPicker">
           <span class="divPutTextToFixIssue"></span>                 
        </div>
        <div class="divAccountData">
            <span>Balance: $555</span>
        </div>
    </div>

Answer 1

默认vertical-align值是baseline哪个

将框的基线与父框的基线对齐

注意:您可以通过添加vertical-align:baseline到.divAccountData选择器来查看此默认值.由于baseline是默认值,因此对齐方式不变.

您需要将其更改top为将块对齐在顶部,例如:

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

基线定义为

大多数字母"坐"的线和下方延伸的线

为了解决为什么添加文本似乎解决问题,这是因为

"内联块"的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其"溢出"属性具有"可见"以外的计算值,在哪种情况下,基线是底部边缘边缘.

来自CSS2视觉格式化模型细节

因此,仅添加单个字符会更改基线,从而导致第二个块出现在相同的垂直对齐中.这仅如果两个块包含相同的行数的工作.尝试在其中一个块中添加更多单词,您将看到在不强制vertical-align:top第二个块的情况下,它将根据第一个块中存在多少行文本而移动.

编辑:发现一个相关问题为什么这个内联块元素被推下？