谢谢陈老师，现在要明白一些了！

关于作用环境——

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。(本节所说）

所谓inline-block水平的元素，即可以与inline水平元素混排，又能设置高宽属性的元素，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

对inline元素设置vertical-align是有作用的，只是要重新设置line-height的值，否则继承了父元素的line-height只能垂直居中。

例一：inline元素作为父元素（注意是作为父元素，行元素或inline-block元素都可以）可以不设置line-height，字体会撑起一个适合子元素作用的高度。小白点可以各种对齐。

<span class="box"> <span class="dot"></span> 我是一段卡哇伊的文字。 </span>.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white;vertical-align:top;}

例二：div父元素（块元素作为父元素）必须设置line-height，否则对其设置vertical-align无效，图片不会在绿色框里动~

<div class="outerbox"><img src="C:\Users\Administrator\Desktop\test.jpg"/><span>这是外层元素的内部文字</span></div>.outerbox{width:300px; line-height: 300px;font-size: 16px; }
.outerbox img{width: 30px; height:30px; vertical-align: bottom;}
.outerbox span{vertical-align: top;}

对文字设置vertical-align:top 无效是因为文字继承了父元素的line-height，导致文字居中，要想vertical-align起作用，可在该元素上设置line-height小一些覆盖父元素。

 引自：http://blog.csdn.net/diudiu5201/article/details/54666809

了解了，所谓在父元素中设置，会对inline-block元素起作用，是直接对inline-block元素设置应用vertical-align元素

<div class="aini"><img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

    </div>