作为一个前端小白，之前一直觉得文本撑开内容的高度是很自然的现象，但是，文本所撑开的高度事实上并不是高度，而是行高。
那么，到底什么是行高呢？
先从代码中看到行高
<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块要和文本基线对齐。
