В чём разница между vertical-align: baseline и vertical-align: middle?

Разница между vertical-align: baseline и vertical-align: middle заключается в способе выравнивания элемента по вертикали. 15

vertical-align: baseline выравнивает базовую линию элемента относительно базовой линии его родителя. 15 Если родительский элемент не имеет базовой линии, то за неё принимается нижняя граница элемента. 2 Baseline — значение по умолчанию для свойства vertical-align. 3

vertical-align: middle выравнивает середину элемента по вертикали с базовой линией родителя плюс половина высоты родительского элемента. 15 В этом случае берётся середина именно самого элемента, а не его возможных элементов-потомков (которые могут быть выше). 1

Таким образом, baseline ориентирован на выравнивание по нижней линии, а middle — по центру элемента.