В чем заключаются различия между vertical-align: baseline и vertical-align: middle?

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

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

vertical-align: middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. 1 Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии. 1 Для табличных элементов значение middle выравнивает содержимое текущей ячейки по центру строки с учётом внутренних отступов (padding-box). 1

Таким образом, baseline фокусируется на выравнивании базовой линии, а middle — на выравнивании середины элемента.