作为一个前端小白，之前一直觉得文本撑开内容的高度是很自然的现象，但是，文本所撑开的高度事实上并不是高度，而是行高。
那么，到底什么是行高呢？

先从代码中看到行高

    <div class="test">
        先看到什么是行高
    </div>

    .test {
        line-height: 0;
        border: 1px solid #ccc;
    }

就像下面这样

行高.PNG

还有这样：

<div class="test">
    先看到什么是行高
</div>

.test {
                font-size: 0;
        line-height: 20px;
        border: 1px solid #ccc;
    }

效果如下：

行高2.PNG

从上述代码的结果中可以看到line-height=0的位置在文本的中线附近，之后你每增加1px的line-height, 它的行高就先1px向下拓展，再1px的向上拓展。

什么是行高

行高，字面意思，就是一行的高度，也就是line boxes的高度，它是由一行中最高的inline boxes的高度决定的。
但是，这还牵涉到了一个问题，就是一行中各个inilne boxes彼此之间是如何排列的，
经过我的测试，发现各个块之间是和文本的基线对齐的，测试代码如下：

    <div class="test">
        <span class="red"></span>
        <span class="blue"></span>
        <span class="green"></span>
    </div>

    span {
        display: inline-block;
        width: 100px;
        height: 40px;
    }
    .red {
        background: red;
    }
    .blue {
        background: blue;
    }
    .green {
        background: green;
    }

从上述代码可以看出，如果没有文本的话，三个inline-block块是对齐的，就像这样，

3个inline-block块.PNG
但是如果我给其中一个块添加了文本，那么有文本的块就会下移，但是最终的结果还是空的inline-block块会和文本的基线对齐，此时如果我把line-height设为0， 可以看到line-height就在文本的中线附近，和附近的inline-block块的底线是对齐的，但是由于height是和line-height的的顶线是重合的，所以造成了一个现象，就是如果我给包含文字的inline-block块设置了背景颜色，那么可以看到文字的上一半是没有背景颜色的，就像下面这样：

    <div class="test">
        <span class="red"></span>
        <span class="blue">asdfasdf</span>
        <span class="green"></span>
    </div>

    span {
        display: inline-block;
        width: 100px;
        height: 40px;
    }
    .red {
        background: red;
    }
    .blue {
        background: blue;
        line-height: 0;
    }
    .green {
        background: green;
    }

结果就像这样：

文字下沉.PNG

这样，就可以解释为什么如果在第二个inline-block中写入文本后这个盒子会下沉了， 因为你写入了文本，周围的inline-block块要和文本基线对齐。