Why does overflow:hidden on an inline-block make the following text a little bit lower?

Question

If I set display: inline-block on a <span/>, there is no visible difference, which is good. But when I further set overflow: hidden, the following text goes a litter bit lower. Why is that?

I saw no margins/paddings at all.

PS. what I'm trying to accomplish is to make text-overflow: ellipsis happen, which requires max-width, which in turn requires inline-block.

.s1 {
  display: inline-block;
  overflow: hidden; /* this makes the following text a bit lower, why? */
}

<span class='s1'>Hello</span> world (why am I a litter lower than "Hello"?)

Answer 1

Specifying overflow other than visible creates a new block formatting context, which does not have a baseline anymore, so it can't be aligned with the surrounding baseline.

You can fix up the alignment with vertical-align: bottom:

.s1 {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

<span class='s1'>Hello</span> world (why am I a litter lower than "Hello"?)