Почему снятие флажка свойства vertical-align на этом изображении изменяет список вместо изображения?

Question

Почему снятие флажка свойства vertical-align на этом изображении изменяет список вместо изображения?

Проверено:

Неконтролируемый:

Answer 1

Встроенные элементы совместно используют невидимый гид называется linebox. Линейка соответствует вертикальному расположению элементов внутри нее относительно друг друга. Поскольку он инкапсулирует взаимосвязь между этими встроенными элементами внутри, на сам ящик будут также влиять эти элементы.

Когда вертикальное выравнивание изображения установлено на «средний», линейная линия перемещается в центр родительского контейнера. Это связано с тем, что элемент изображения больше, чем линейный, поэтому линейный блок - это тот, который перемещается при изменении свойства (если изображение было меньше, чем в строке, изображение было бы перемещено, а не в строке).

Удаление вертикального выравнивания по изображению приводит к тому, что оно по умолчанию возвращается к «базовой линии», и когда базовые линии линейного блока и изображения перестраиваются, линейная строка теперь находится внизу родительского контейнера, который сдвигает остальную часть содержание, которое оно содержит там.

Here's a really good read on the whole thing (Намного более полезным, чем документы MDN)