不知道大家在敲代码的时候有没有遇到这样的问题，就是一个span元素和一个块级元素（div或者p，此文以p为例，当然对于div也适用）位于同一行时，有的时候会发现span元素内的文本偏下。好了废话不多说，先来个效果图：
CSS代码：
.pDiv{width: 500px;}.pDiv > span{display: inline-block;height: 25px;margin-bottom: 50px;}.block{display: inline-block;width: 150px;height: 25px;margin: 0;border: 1px solid #21ab38;border-radius: 3px;background-color: #fff;margin-bottom: 50px;}
html代码：
<div class="pDiv"><span>span元素</span><p class="block"></p></div>
可是当你在p元素内写上文本的时候就发现，居然对齐了！！
<div class="pDiv"><span>span元素</span><p class="block">块级元素内的文本</p></div>
效果图：
我真的什么CSS代码都没动，只是在p元素内添加了文本内容。
那么，为什么添加了文本就能对齐了呢？经过各种查资料，哀家终于找到了原因。
由于元素默认的vertical-align属性的值是baseline，即基线对齐。对于内部有文本的块级元素p的baseline是最后一行文本的baseline(不同浏览器也不太一样)，没有的就是下边缘(包括margin)，这样就导致了没有文字时<span>的baseline对齐了p的baseline也就是对齐了p的下边缘，而p元素内有文字时就和p内的文本对齐了（注：此处不考虑p内有多行文本的情况）。
当块级元素内没有文本时，又该如何对齐呢？
一共有三种解决方案，如下：
第一种，可以给span元素添加vertical-align: top;属性；
第二种，给p元素添加vertical-align: bottom;属性；
第三种，把span和class值为block的p元素的display: inline-block;改为display: block;float: left;
注意：以上方法的前提是span和p元素有同样的高度height，你想想，要是二者的高度都不一样，又怎么可能垂直对齐呢?
好了下面是修正过后的效果图。
