文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。
默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐，接下来为大家详细介绍下设置各对象的vertical-align属性，感兴趣的朋友可以参考下哈
文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置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>
实现图片于文字的底端对齐
最近在使用3个span（或div）制作带圆角边框的按钮时，按照常识，把span的display设置成inline-block，这样就可以设置span的width和height了，很爽的~
可是当我在中间的span写上文字的时候，神奇的事情发生了：
是的，写上字的那个span掉下来了，掉落，排版错位，很恶心的东西！使用Chrome的开发者工具查看，css和盒模型没有半点问题，郁闷中……
仔细观察发现，掉落的高度貌似跟文字的高度差不多，试了下，如果把文字字体加大，发现变成这样了：
是的，有文字span向上移动了一些！也就是说，掉落的那个、有文字的span的掉落程度跟它上面的文字的大小有关系，文字的大小代表什么？大号文字的重心明显比小号文字的重心高，于是把字体改回原来的样子，然后试着使用vertical-align直接修改文字的重心位置为：
vertical-aligntop
得到这样的结果：
成功了！有文字的span跟没有文字的span对齐啦！
原因：
很明显是vertical-align设置错误的问题，谷歌了下vertical-align的用法，找到如下链接：
CSS属性Vertical Align使用方法讲解
- http://www.jzxue.com/wangyesheji/css/201006/11-3937.html
大体意思是，vertical-align只用在display属性inline或inline-block的情况下才能使用，默认为baseline，就是“display属性inline或inline-block”的控件的底端跟文字的baseline（基线）对齐：
所以，在设置vertical-align之前，左右两个没有文字的span的底端跟中间那个有文字的span里的文字的基线对齐了，所以中间那个span就下降了文字高度的尺寸。而改变文字的尺寸后，基线随之被提高，然后中间有文字的那个span也就跟着上去了。设置vertical-align:top后，左右两边的span的top跟中间span的top对齐，问题解决了~
默认的baseline是文字的底端，bottom是包文字的容器的底端。
移除空格的方法
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：
<div class="space">
<a href="##">
惆怅</a><a href="##">
淡定</a><a href="##">
热血</a>
</div>
或者是：
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>
或者是借助HTML注释：
<div class="space">
<a href="##">惆怅</a><!--
--><a href="##">淡定</a><!--
--><a href="##">热血</a>
</div>
或者直接可以用float来解决。