实例二：bottom
参见如下的CSS代码：
复制代码
.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}
结果如下图： 
实例三：text-bottom
参见如下的CSS代码：
复制代码
.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}
结果如下图：
对比vertical-align:bottom和vertical-align:text-bottom，他们的表现似乎一样，实际上呢，这里的表现一致只是一个巧合而已，此话怎讲？要显示其差异很简单，添加一个line-height值，您就会看到不一样的地方了。
实例四：line-height:10px + vertical-align:bottom
参见如下的CSS代码：
复制代码
.box{background:black; color:white; padding-left:20px; line-height:10px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}
结果如下截图：
而如果vertical-align的属性是text-bottom呢？
实例五：line-height:10px + vertical-align:text-bottom
参见如下的CSS代码：
复制代码
.box{background:black; color:white; padding-left:20px; line-height:10px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}
结果如下图：
可以看到，vertical-align:text-bottom属性的那个小方点的位置没有随着line-height的改变而改变，还是与文字的底部对齐。如果您细看关于text-bottom以及bottom属性的定义，您可以找到其表现的原因：text-bottom是与父标签的文字底部对齐，在这里也就是后面的“我是一个卡哇伊的文字”这段文字对齐，而bottom是相对于父标签的底部对齐，而如果您熟悉line box模型且对高度的本质有所了解，那么您就会明白为什么line-height会改变标签的bottom的位置了。这点的了解有助于理解下面vertical-align:middle生效的过程及原理。
