Объясните, пожалуйста, поему так происходит.
В строке есть 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>