<div class="con">
<img src="../img/jiaoyue.png" /><span>I am very good</span>
</div>
![](https://img2020.cnblogs.com/blog/1419197/202010/1419197-20201022173939006-1563824619.png)
底下会有空白,因为行内块状元素默认是以文字的基线对齐的,
解决方案有两个
1.
.con{
border:1px solid red;
font-size: 0;
line-height: 0;
}
.con span{
font-size: 16px;
}
效果:
![](https://img2020.cnblogs.com/blog/1419197/202010/1419197-20201022174118749-964454428.png)
方案2:
.con{
border:1px solid red;
}
.con span{
}
img{
height:50px;
50px;
vertical-align:bottom
}
效果:
![](https://img2020.cnblogs.com/blog/1419197/202010/1419197-20201022174223684-1054453928.png)