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

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

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

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

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