HTML/CSS: Font does not render vertically centered with inline-block

Question

I have the following HTML/CSS code:

p {
  background: lightgray;
}

p#h {
  height: 1em;
}

span {
  display: inline-block;
  margin-left: .5em;
  height: 1em;
  width: 1em;
  background: red;
}

<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>

image

https://jsfiddle.net/e82gzayt/2/

How to get the inline-block having the same height as its parent?

or

How to get the font to be centered vertically with the span block?

Answer 1

You can use flex value to center vertically. Advanced css class.

Try this

p { display:flex;align-items:center;background: lightgray; height: 2em;}
p#h { display:flex;align-items:center;height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }

<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>