Почему этот элемент встроенного блока имеет контент, который не выровнен по вертикали

Наткнулся на странную проблему CSS. Может кто-нибудь объяснить, почему поле с содержимым не выровнено по вертикали?

Если вы поместите текст внутри диапазона с классом .divPutTextToFixIssue - он будет правильно выровнен.

   #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>

Ответ 1

Значение по умолчанию vertical-align - baseline, которое

Выравнивает базовую линию блока с базовой линией родительского блока

Примечание: Вы можете увидеть это значение по умолчанию в действии, добавив vertical-align:baseline к вашему селектору .divAccountData. Поскольку baseline является значением по умолчанию, выравнивание не изменяется.

Вам нужно изменить его на top, чтобы выровнять блоки сверху, например:

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

Базовая линия определяется как

линия, на которой "сидит" большинство букв и ниже которой идут спуски

Чтобы понять, почему добавление текста, кажется, решает проблему, это потому, что

Базовая линия 'inline-block' является базовой линией его последнего строкового блока в нормальном потоке, если у него нет либо линейных блоков in-flow, либо если его свойство 'overflow' имеет вычисленное значение, отличное от 'visible', в В этом случае базовой линией является нижний край поля.

из CSS2 Детали визуального форматирования модели

Таким образом, добавление только одного символа меняет базовую линию, в результате чего второй блок появляется в том же вертикальном выравнивании. Это только работает, если оба блока содержат одинаковое количество строк. Попробуйте добавить больше слов в один из ваших блоков, и вы увидите, что без принудительного ввода vertical-align:top во второй блок он будет перемещаться в зависимости от того, сколько строк текста существует в первом блоке.

Изменение: Нашел связанный вопрос Почему этот элемент встроенного блока толкается вниз?

Ответ 2

Вам нужно добавить vertical-align: top; в .divAccountPicker demo

Ответ 3

............................... Привет теперь добавьте vertical-align:top в свой .divAccountData, .divAccountPicker класс как будто это

.divAccountData, .divAccountPicker {
    vertical-align: top;
}

демонстрация LIve

если вы использовали display:inline-block;, чем использовать для всех путей vertical-align:top

Ответ 4

попробуйте это

.divPutTextToFixIssue {
   display:inline-block;
 }

jsFiddle