這個還真的不好說，CSS 標準里并沒有明確的規(guī)定如何計算：

When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.

The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.2 does not define the position of the line box's baseline.

The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."

標準里沒有明確的規(guī)定怎么計算，也提到可能會有多種解。

從個人經驗來說，基本上就是在滿足規(guī)定的對齊的情況下，使得行框最低。
對于單一的元素：

1. 文字的 baseline 就不說了。

2. 對于 img 其 baseline 是圖片的低邊框。

3. 對于 inline-block，如果其中有行框(子孫元素中的行框一起算)，其 baseline 是最后一個行框的 baseline，如果沒有，inline-block 的 baseline 就是這個 box 的margin 下邊緣。

一個行框的baseline位置是：

1. 如果其中有 baseline 對齊的元素，那么行框的 baseline 就是這些元素的 baseline。

2. 如果沒有，那么就假設其中有一段文字(繼承字體字號等)，那就是它的 baseline

大概就是這個樣子，個人經驗，可能不準確，而且不同瀏覽器也可能不同。