inline-block

inline-block 必须要配合 vertical-align属性来用，不然就会出现莫名其妙的问题。
就是这个行模型啊，它的基线是根据最高的那个 inline-box 来确定的。
winter 老师建议，inline 的盒子的 vertical-align 只用 top || bottom || middle
比如下面的代码，倘若我们把最后一段 [class = ‘verti‘] 的 code 中的 vertical-align 调整为 baseline，一看，整个网页的布局就会被全部打乱，产生非常难以调试的代码。

<div style="font-size:50px;line-height:100px;background-color: pink;">
  <div style="vertical-align: text-bottom;overflow: visible;display: inline-block;width: 1px;height: 1px;">
    <div style="width:1000px;height:1px;background: red;">
    </div>
  </div>
  Hello 中国
  <div
    style="vertical-align: baseline;line-height:70px;width:100px;height:150px;background-color: silver;display: inline-block;">
    111</div>
  <div
    style="vertical-align: bottom;line-height:70px;width:100px;height:150px;background-color: aqua;display: inline-block;">
    111</div>
  <div
    style="vertical-align: top;line-height:70px;width: 100px;;height: 50px;background-color: purple;display: inline-block;">
    222</div>
  <div class="verti"
    style="vertical-align: middle;line-height:70px;width: 100px;height: 600px;background-color: blue;display: inline-block;">
    222</div>
</div>

inline-block

原文：https://www.cnblogs.com/ssaylo/p/13213054.html