Конфликты вертикального выравнивания CSS
Я хотел бы полностью понять, что происходит, когда возникают конфликты в расположении базовой линии и разные vertical-align в соседних строчных элементах. Я пробовал тестировать это на более сложных сценариях, но, короче говоря, базовая линия перемещается вверх или вниз в зависимости от того, какой элемент идет первым, и я не могу найти в документации ответа на то, как разрешаются эти конфликты.
.container {
color: white;
background-color: black;
width: 160px;
border: 4px solid black;
}
.foo,
.bar {
display: inline-block;
width: 60px;
height: 60px;
}
.foo {
background-color: orange;
vertical-align: top;
}
.bar {
background-color: yellowgreen;
vertical-align: bottom;
}<div class = "container">
A
<!-- swap foo with bar -->
<div class = "foo">
B
</div>
<div class = "bar">
C
</div>
</div>
Ответы 1
На самом деле однозначного ответа нет. Из Спецификации:
Если они выровнены «сверху» или «снизу», они должны быть выровнены так, чтобы минимизировать высоту линейного блока. Если такие блоки достаточно высокие, существует несколько решений, и CSS 2.2 не определяет положение базовой линии линейного блока.
Как вы можете прочитать, у нас может быть несколько решений, то есть несколько базовых показателей, и спецификация не определяет, какое из них использовать.
Это случай вашего примера, и если вы протестируете свой код в разных браузерах, вы не получите одинаковый базовый показатель.
Chrome выбери верх
Firefox выбирает низ