CSS vertical alignment of inline/inline-block elements

Question

I\'m trying to get several inline and inline-block components aligned vertically in a div. How come the span in this exam

Answer 1

Simply floating both elements left achieves the same result.

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}