68

I have following HTML:

<div>
    a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>

What I expect to see: abc.

What I see (in Chrome, Safari, Firefox): abc

b is higher than a and c. Why it is so and how to fix it?

Daniil
  • 5,760
  • 5
  • 18
  • 29

1 Answers1

139

This happens because the inline-block element has height equal to its parent and overflow: hidden causes its bottom edge to be aligned on the text baseline of the parent. As a result the space that is available for descenders on the text is essentially doubled for the <span> (JSFiddle).

You can fix this by also giving it vertical-align: bottom.

Jon
  • 428,835
  • 81
  • 738
  • 806
  • But without `overflow:hidden` everything is OK – Daniil Dec 13 '13 at 12:44
  • 5
    @Daniil: `overflow:hidden` changes the baseline for `inline-block` elements, and since the default value for `vertical-align` is `baseline` the element moves vertically. See the [CSS spec](http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align) (scroll to the bottom). – Jon Dec 13 '13 at 12:46
  • It worked on the `inline-block` element. Thanks, dude. – steveluoxin Sep 18 '17 at 03:58
  • 2
    Thank you for this clear answer! I needed just this exact information for a oddly specific issue. It's fixed now! – travelsize Aug 16 '18 at 19:20
  • 1
    I had this issue, but only on Firefox. Adding `vertical-align: bottom` fixed it on FF, but made it look farther down than it should have been on Safari and Chrome. The fix for this was to use `vertical-align: text-top` instead. – Nate Levin Aug 28 '20 at 17:25