inline, inline-block元素在同行元素的排版布局中非常有用，但是时常会出现一些莫名奇妙的问题。要解决这些问题，深刻理解inline,inline-block元素的特征有非常重要的意义。

下面这篇英文文章解释的非常清晰，我视图把他翻译一下，同时也好好学习梳理一下。

http://christopheraue.net/2014/03/05/vertical-align/

我常常需要side by side地垂直方向对齐元素。为了实现垂直对齐，时而我使用float来实现，时而又实用postion:absolue来解决，甚至有时还手工地添加一些margin/padding来完成。实际上我并不喜欢这些解决方案。Floats仅仅在顶部top做了对齐，并且需要手工clear float. absolute定位将元素彻底移出文档流，所以他们再也不会影响到包裹它的元素布局。而第三种手工设置margin/padding的方案往往会在丁点的改动时破坏整个布局！

但是还有另外一种方案： vertical-align. 我想这个属性值得深入研究.通常从技术上来说使用vertical-align来做layout属于hack，因为这个属性本身并不是用来做layout而发明的。vertical-align属性发明的本意是要将紧挨的元素对齐而使用的。然而，尽管如此，你也可以在不同的场景下使用这个属性来细粒度并且灵活地实现你要的对齐效果。更牛的是，元素本身的大小完全可以不用关心。元素由于存在于文档流中，所以其他元素可以针对这些元素尺寸的变化而变化。也正是因为这，使得vertical-align来实现对齐是一个非常有价值的option.

Vertical-align的特点

 vertical-align属性对于很多人来说有时甚至是非常糟糕的，使用起来令人沮丧。看起来好像有一些神秘的规则在工作着。比如：有可能你更改了vertical-align属性的那个元素并未有任何改变，而其他的同行元素却神奇的变化了！本文试图揭开vertical-align的面纱让我们彻底掌握它

需要使用vertical-align属性的场景

vertical-align属性用于对齐inline-level elements，也就是具有下列display属性值的元素：

• inline
• inline-block
• inline-table

inline elements基本上就是包裹text的tag。

inline-block元素正如他们的名字所提示的意思：living inline的block元素。他们可以有width和height(很有可能是由它的内容来决定的），也可以有padding,border和margin

inline-level元素在布局时，在行内一个接着一个的排版。一旦元素无法在本行放置的话，就在下面另起一行。所有这些line有一个术语：line box,这个line box会包裹所有行的内容。不同大小尺寸的内容意味着不同高度的Line box.下面的延时中，top和bottom由红线来表示

在这些line box里vertical-align属性负责对齐各个元素

About Baselines and Outer Edges

垂直对齐最重要的参考点是相关元素的baseline。在有的情况下，元素的包裹盒子的顶端和低端边缘也会变得非常重要。让我们看看baseline和outer edge对于每一个inline元素在什么位置

Vertical-Align: 关于inline,inline-block文本排版