（1）当图片的设置为 top ,文字设置 bottom ：

    首先不是说文字会与图片的底部对齐，而是因为图片太高，高于父容器的内容高度，导致图片对齐父容器的内容文字顶部后撑开了父容器，使父容器高度变高，然后这时父容器的底部巧合和图片底部在同一水平线，然后你就错以为说它后面的文字是和图片底部对齐了，实质上是后面文字与父容器的底部对齐。你自己测试将图片大小变小，小于父容器内容高度，你就明白了，如下：

（2）当图片的设置为bottom,文字设置bottom：

    会下沉？没感觉噢，我个人认为是不会有下沉的，都会在同一条水平线上。

    假设父容器中不含有其他元素，只有自己的文字内容，那它高度正是他的内容高度，如下图：

    这时候给他内容加一个图片，设置vertical-align：bottom，图片底部会和上面的内容底部在同一水平线，如下图：

    这时再在图片后加一段文字（【span】display：inline-block；vertical-align：bottom），它一样是会和父容器初始内容底部在同一水平线，不会受到图片的影响。如下图：

    所以我感觉是你看错了。

    好好琢磨透“只与父级有关系”这个还是很不错的。

    以上为个人学习后的理解，如有错误，Emmm，哈哈哈哈哈，快来教懂我吧。

不好意思我搞明白了 是我的问题 

图片拥有了vertical-align：top属性其意义是图片顶部与父元素顶部对齐，而其他元素并没有特殊的对齐属性，就会依照默认的左上对齐，所以就会显示出来图片下移，整体上移

1. 是图片拥有了顶部对齐父元素顶部的属性，那么自然就会顶对齐，而文字及其他元素并没有特殊属性，所以会默认在顶部对齐，就形成了所有元素往上推
   

2. 就是一条的原因

3. 右侧是文字，它自身的基线也是相对于自身而言是没有变化，所以并不是右侧基线上去了，而是右侧元素整个上移，另外图片的基线和文字基线并没有关联，它们的baseline属性值都是相对于父级的基线的，所以两者的位置不会相互影响。
   

去掉display:inline-block.仔细看，是有效的