The green boxes contain some Ahem characters and have different line-height
line-height: 4
line-height: 2
line-height: 1
line-height: 0.5
line-height: 0.25
line-height: 1px
With different line-height, different space is added or substracted at the top and at the bottom of the content area. The same amount (half leading) is added/substracted at the top and at the bottom. The middle of the line box is always the middle of the content area.
The middle of the content area is different (usually above) the baseline. If the line-height is very small the baseline could be outside the line box. In Safari (WebKit) this never happens: the line box is never shrunk too much: it is at least the distance between the content area's middle line and the baseline.
line-height: 1px, 1—4 lines
line-height: 0, 1—4 lines