Vertical alignment of empty inline-block elements

Question

Consider the following html/css:

a


        

Answer 1

Just in case still helps someone, another solution, enforcing to have some space from CSS:

  span:empty:before {
    content: "\0020";
    display: inline-block;
  }

Answer 2

Give the span top alignment then negative margin equal to your padding, and you don't need the non-breaking space hack.

span
{
    display:inline-block;
    width:5em;
    height:5em;
    padding:1em;
    vertical-align:top;
    margin-top: -1em;
}



a
    <span style="background-color:blue;">b</span>
    <span style="background-color:green;"></span>
    <span style="background-color:red;">c</span>
d

Answer 3

a
<span style="background-color:blue;">b</span>
<span style="background-color:green;">&nbsp;</span>
<span style="background-color:red;">c</span>
d

Answer 4

Try adding   inside of the green colored span.