[toc] ## %  ## 清楚间隙  ## 大小不固定图片的垂直居中  ## 基线与inline-block  ### 栗子 1.1  如果将inline-block里的行高设置为0 1.2  (右边的框框又下移了一点，因为行高变为0，文字content-area的中心和框框上边缘重合（文字不再占据高度），基线也随之上移) ### 复杂栗子   将line-height设置为0后，发现依然存在间隙  这是因为i成为了inline-block元素，并且是个空元素，它的基线就为它的margin下边缘 需要和行框盒子的幽灵空白节点的基线对齐，又由于这个行框盒子被设置了line-height:0，参考1.2，此时幽灵空白节点如下  那么i盒子和幽灵空白节点对齐，就会照成如上间隙（虽然幽灵空白节点不占据空间，i是要占据的，so会造成间隙） 我们可以选择vertical-align:top/bottom清楚， 或则在i里放一个字符（这样i这个inline-block盒子的基线就是这个字符的基线，）又由于line-height为0，故就能和幽灵空白节点基线对齐又不生成多余的间隙（因为line-height为0时，字符不占据空间）