进一步理解：inline-block，vertical-align，line-height

看似三个最常见的概念背后却隐藏了很深的很深“水”
那有多深呢，先来看下面的代码

引出问题

<style>
    .inline-block {
      display: inline-block;
    }
    .border {
      border: 1px solid #000000;
    }
    .span {
      width: 100px;
      height: 100px;
    }
    .bak {
      background: #33CCFF;
    } 
    .o-hidden {
      overflow: hidden;
    }
</style>
<div class="border">
   <span class="inline-block border"></span>
</div>

<div class="border">
   <span class="inline-block border span"></span>
</div>

<div class="border">
    <span class="bak inline-block">x</span>
    <span class="inline-block border span"></span>
</div> 

<div>
    x
    <span class="inline-block border span">x</span>
    <span class="inline-block border span"></span>
    <span class="inline-block border span o-hidden">xjq</span>
</div> 

好，同学们把这四段代码放到编辑器里面然后打开浏览器，如果对于你眼前的画面没有感到疑惑，那么其实你就无需向下看了

On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut.” (The name is inspired by TeX.).

翻译成国语：

在一个由行内元素组成的块级元素中，line-height指定了这个元素中的所有line box的最小高度。这个最小高度包括在baseline上面的最小高度和baseline下面的最小深度，就好像每个line box是由一个0宽度的，有着元素的font和line-height属性的行内框开始的，我们称这个虚拟的盒子为strut

关于baseline和line box的概念请参考张鑫旭大大的文章：
http://www.zhangxinxu.com/wor...

看着很乱是吧，上图来看：

分析原因

这是前两段代码的示意图，对比两张图发现span没有宽高的情况下，baseline上下分别有隐形高度；设置宽高之后，下面的strut仍然存在，再来看第三段代码的示意图

图中蓝色区域为行内框的高度，红线即字母x的baseline,strut的高度正好是红线到底边框的高度，也就是说默认垂直对齐方式是baseline;扫了一眼MDN关于vertical-align的文档，默认值果然是baseline，印证了这一说法。

看最后一段代码示意图：

wtf，这又是几个意思？？baseline怎么又和底边框接上了？？

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

再来翻译成国语：

对于一个 inline-block 元素，如果它内部没有内联元素，或者它的overflow属性不是visible，那么它的baseline就是元素margin的底端。否则，就是它内部最后一个元素的基线。

好了，图中三个框可以很好地理解这段话：

最前面的x是用来确定这个代码中最外层的div的基线。左起第一个矩形内部有文字，属于内联元素，那么第一个inline-block的基线为内部x的基线，第二个inline-block的内部无内联元素，那么它的基线就是margin的底端，第三个inline-block内部有内联元素，但是他的overflow属性为hidden，不是visible，所以它的基线还是margin的底端。

解决方案

1. font-size: 0 或者 line-height: 0

2. vertical-align !== baseline

方法1和方法2是两个不同的实现思路，方法1是让strut那个东西消失；方法2说起来就有点多了，简单理解就是inline-block垂直方向设置非baseline，从而让strut没有顶到底部，也就不会有空白出现了

感觉自己写的很乱，有耐心看完的同学真是谢谢你们了~~

还是张鑫旭大大写得好写的全
http://www.zhangxinxu.com/wor...