0

In CSS, line-height seems to be ignored for anything less than the font-size defined.

I'm trying to get the "+" vert/horz centered within the button. line-height stops being effective as soon as it's less than the font size when the button is either inline-block or block. Links contain fiddles.

On mac Safari/Firefox/Chrome, the behavior is all consistent but seemingly incorrect. However, I'm not finding any mention of this behavior and I've even found an old test page that alludes to this being incorrect behavior: http://www.hixie.ch/tests/evil/mixed/lineheight3.html#a6

So what gives? I remember being able to use line-height this way. When'd it change? Is this part of the html5 spec? Does anyone have a workaround? (vertical-align also seems to not work.)

Cory Mawhorter
  • 1,583
  • 18
  • 22
  • Well what do you expect when it overflows? – epascarello Mar 06 '17 at 18:06
  • @epascarello see the [mdn page on line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height). If there is only a single line, it should act a little bit like a top-pad and pull the plus sign up so that it's vertically centered. – Cory Mawhorter Mar 06 '17 at 18:11
  • Possible duplicate http://stackoverflow.com/questions/5014617/why-does-html5-ignore-line-height-smaller-than-font-size – Asons Mar 06 '17 at 19:41
  • Since a button already center its text vertically/horizontally, why use line-height? – Asons Mar 06 '17 at 20:20
  • @LGSon I found that post and this is not a dupe. It seems like a bug in the browser that all vendors have agreed on. It only impacts single line text as evidenced by the example on that MDN page. If you look, the text of the <1.0 line-height is higher up than the "correct" side: http://imgur.com/a/FLIAv -- As for why, the button does not have vertically centered text. I've worked around the problem by wrapping and adding a negative margin, but this seems to be a bug in the browser. – Cory Mawhorter Mar 08 '17 at 06:16
  • When it comes to `line-height`, it might be so, don't have time now to dig deeper, but when it comes to vert/horz center text in a `button`, it does that by default: https://jsfiddle.net/gsg3s9bm/4/ – Asons Mar 08 '17 at 06:48

0 Answers0