Выравнивание inline-block элемента по вертикали

Question

Объясните, пожалуйста, поему так происходит.

В строке есть 2 элемента <label> и <div>(display: inline-block).

Div имеет высоту line-height: 32px и является самым высоким элементом строки.

В какой-то момент у <div> появляется свойство vertical-align: top. Вопрос в том, почему при появлении этого свойства у <div>, <label> начинает выравниваться по верхнему краю <div>?

В документации написано, что vertical-align: top - это выравнивание верхнего края элемента по верху самого высокого элемента строки. В нашем случае, самый высокий элемент является сам <div>. И vertical-align: top указано исключительно только для него. Почему же в таком случае это влияет на <label>?

https://jsfiddle.net/xwurymeg/

    .inline-element {
        display: inline-block;
        line-height: 32px;
        vertical-align: top;
    }

    .border-red {
        border: 1px solid red;
    }

    .border-green {
        border: 1px solid green;
    }

    <div>
        <label class="border-red">text</label>
        <div class="inline-element border-green">
                inline element
        </div>
    </div>

Answer 1

Вы совершенно верно подметили про высоту самого высокого элемента в блоке, если Вы посмотрите сейчас, то увидите что они выровнены относительно базовой линии (baseline), т.е видно где проходит эта самая линия. Во варианте с top, данный div будет выровнен относительно верхней линии:

.inline-element {
  display: inline-block;
  line-height: 32px;
}

.border-red {
  border: 1px solid red; 
}

.border-green {
  border: 1px solid green;
}

<div>
  <label class="border-red">text</label>
  <div class="inline-element border-green">
    inline element
  </div>
</div>

Я уже подробно рассматривал этот момент здесь:

Логика размещения дочерних блоков в HTML/CSS

Почему label для textarea отображается не сверху, а внизу?

Что такое базовая линия элемента?

Почему не работает vertical-align?

БЛОГ НА HUSL

Выравнивание inline-block элемента по вертикали

Ответы (1 шт):