浅谈line-height和vertical-align两个css属性

行高line-height

浏览器默认文字大小为16px
行框 = 文字大小 + 上间距 + 下间距
行高是基线与基线之间的距离
一行文字，行高和容器高度一致，这行文字垂直居中。
一行文字，行高比容器高度小，这行文字偏上显示。
一行文字，行高比容器高度大，这行文字偏下显示。

属性值
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

垂直对齐方式vertical-align

vertical-align属性只对行内块元素起作用。

在工作中经常会碰到如下文所示的一些小“bug”：img底部空余一部分空隙

<div class="box">
    <img src="./pic.png" alt="">
    中国xyz
</div>

*{
  margin: 0;
  padding: 0;
}
.box {
  background-color: yellow;
}

原因
因为img为行内块元素，会有个vertical-align(垂直对齐方式)默认值：baseline（将元素放置在父元素的基线上），且父元素有一段文本，所以会撑大盒子，底部留出空隙。
解决方案
给img盒子设置vertical-align属性覆盖掉默认值

.box img{
   /*vertical-align: top;*/
   /*vertical-align: middle;*/
   vertical-align: bottom;
}

工作中导航栏常用浮动方式实现，会将浮动元素以行内块的方式显示，也常会碰到这种情况。