1.关于display:inline-block . 使用目标是图片和块的区别？
今天遇到一个问题，在不使用浮动的情况下，让块和块里的图片都并列排序，
正常情况下使用float ：left；就可以使它们排序。inline-block也可以使用块正常排序。
问题是 当块里有img ，和div一起排列的时候为什么到顶点的高度就不相同？宽度有间隙我知道是父元素font-size：0
2.代码：`
<p class="mainer">1</p>
<p class="mainer">2</p>
<img src="images/pic01.jpg" alt="图片1">
<img src="images/pic01.jpg" alt="图片2">
</div>` .mainer{
width: 50px;
height: 50px;
background: #666;
display: inline-block;
}
img{
display: inline-block;
width: 50px;
height: 50px;
}
效果图：
的确是 块中的文字造成的块不对齐，如果里面没有文字，它会和图片并列。
写回答
“html默认的情况是图片顶对齐而文字底对齐”，当文字和图片排列时会出现标准不统一的情况，所以你自己统一设置一种，比如“vertical-align：middle”就可以使文字和图片以垂直居中的方式对齐了。
文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。
设置各对象的vertical-align属性，属性说明：
`
baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐
`
在此设置为text-bottom即可实现图片与文字位于同一水平线上，好看多了
如下：其他自己改
复制代码
代码如下:
<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span> 版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
