page132-5.3 line-height 的好朋友 vertical-align
.box { line-height: 32px; }
.box > span { font-size: 24px; }
<div class="box">
x<span>文字x</span>
</div>
作者在这里解释到，我们可以明显看到两处大小完全不同的文字。一处是字母x构成了一个“匿名内联盒子”，另一处是“文字x”所在的元素，构成了一个“内联盒子”。由于都受到line-height：32px的影响。因此，这两个“内联盒子”的高度都是32px。因为对字符而言，font-size越大字符的基线位置越往下，因为文字默认全部都是基线对齐，所以当自豪大小不一样的两个文字在一起的时候，彼此会发生上下位移，如果位移距离足够大，就会超过行高的限制，而导致出现意料之外的高度。 该例子中的最后容器高度变成了36px，而非设置的32px。这里我看了半天，怎么多出来的4px呢？？？？没看懂。。。后面再研究一下
.box {
width: 280px;
outline: 1px solid #aaa;
text-align: center;
}
.box > img {
height: 96px;
}
<div class="box">
<img src="1.jpg">
</div>
上面这个案例中，.box元素底部平白无故会多出5px间隙。间隙产生的三大元凶就是“幽灵空白节点”、line-height和vertical-align属性。 解决办法：
- 图片块状化。可以一口气干掉“幽灵空白点”、line-height和vertical-align。
- 容器line-height足够小。只要半行间距小到字母x的下班元位置或者再往上，自然就没有了撑开底部间隙高度空间了。line-height：0；
- 容器font-size足够小。此方法生效，需要容器的line-height属性值和当前font-size相关，font-size：0；
- 图片设置其他vertical-align属性值。间隙的产生原因之一就是基线对齐，所以我们设置vertical-align的值为top、middle、bottom中的任意一个都可以。
<div class="box">
<img src="mm1.jpg">
</div>
.box > img {
height: 96px;
margin-top: -200px;
}
图片没有完全跑到容器的外面，依然有部分再.box元素中，而且就算margin-top设置成-99999px，图片也不会继续往上移动，完全失效。因为图片前面有个“幽灵空白节点”，而在CSS世界中，非主动触发位移的内联元素是不可能跑到计算器容器外面的，导致图片的位置被“幽灵空白节点”的vertical-align：baseline给限死了。 非主动出发位移的内联元素是啥意思？？？？？ tips：text-align：justify生命可以帮助我们实现兼容的列表两端对齐效果，但是text-align：justify两端对齐需要内容超过一行，同时为了让任意个数的列表最后一行也是左对齐排列，我们需要在列表最后辅助和列表宽度一样的空标签元素来占位。
