第一种解决方案

display在inline的时候发生这种情况，所以，换一种display方式可以实现。

{
display: inline-block;
}

第二种解决方案

vertical-align 的默认属性就是 baseline ，我们只要设置了跟 baseline 不一样的属性，都可以避免这个问题。
baseline 默认
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length
% 使用”line-height”属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承vertical-align属性的值

第三种解决方案

{
float:left;
}

第四种解决方案

父元素字体大小设成0

{
font-size: 0;
}