0

I have spotted a strange behaviour of an inline or inline-block element with vertical-align: middle inside another inline/inline-block.

html

    <button id="button-1">
      <span><span class="one">Some text</span></span>
    </button>
    <button id="button-2">
      <span><span class="two">Some text</span></span>
    </button>

css

button {
  padding: 12px 16px;
  background: blue;
  color: white;
  border-radius: 3px;
  border: 0;
}

span {
  line-height: 24px;
}

.one {
  vertical-align: baseline;
}

.two {
  vertical-align: middle;
}

button-1 has 48px height while button-2 has 49.05px.

You may want vertical-align: middle in case of buttons with multiple elements like icon + text. That's pretty strange that button's inner height becomes more then 24px line-height. Of course it can be fixed with making button inline-flex and not using vertical-align but still confusing. The main question: is there a way to do not use flexbox leave vertical-align: middle and preserve needed height of the button?

There is a sandbox to play with https://codesandbox.io/s/sad-glitter-uxjx39?file=/styles.css

Dzmitry Vasilevsky
  • 1,295
  • 2
  • 14
  • 25
  • This is all to do with the space created to accomodate text 'descenders'. See here: https://stackoverflow.com/q/59008729/12571484 – Adam Jan 24 '23 at 17:48
  • Yes, it does that. What's your question? – Alohci Jan 24 '23 at 18:59
  • @Alohci two questions: why? is there a way to avoid it? I have noticed that this is happening only when I am wrapping span inside span. But that's how layout is in angular material 14 button. flexbox isn't an option because it breaks default multiline behaviour – Dzmitry Vasilevsky Jan 24 '23 at 19:30
  • 1
    With the `.two` span, you've got two 24px height boxes vertically offset from one another. The button height is from the top of the upper span to the bottom of the lower. Reduce the line height of the `.two` span to remove the overlap. – Alohci Jan 24 '23 at 20:08
  • @Alohci wow, you a magician bro. Would you like to post an answer and I will approve it? I have edited my question to include a real question – Dzmitry Vasilevsky Jan 25 '23 at 07:58
  • @Alohci actually I have checked and span is looking shifted when I am setting lesser line-height to the inner span – Dzmitry Vasilevsky Jan 25 '23 at 09:04

0 Answers0