CSS вертикальные конфликты ⇐ Html

[Anonymous]

Я хотел бы полностью понять, что происходит, когда возникают конфликты в базовом позиционировании, и в смежных встроенных встроенных элементах существуют разные вертикальные алия . I've tried testing this on more complex scenarios but in a nutshell the baseline moves up or down based on what element comes first, and I can't find an answer in the documentation to how these conflicts are resolved.
JSFiddle Demo

Код: Выделить всё

.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;
}< /code>

A


B

C

Подробнее здесь: https://stackoverflow.com/questions/786 ... -conflicts