深入理解css中的line-height

基本概念

顶线、中线、基线、底线

基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿

行高、行距

• 行高(line-height)
  行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
• 行距(行高-字体size)
  行距是指一行底线到下一行顶线的垂直距离

行内框盒子模型包含的四种盒子

• 内容区域（content area)是一种围绕文字看不见的盒子，内容区域的大小与font-size有关
  底线和顶线包裹的区域，即下图深灰色背景区域
  
• 内联盒子(inline boxes) 每个行内元素会生成一个行内框，如果外部含inline水平的标签（span、a、em等），则属于“内联盒子”如果是光秃秃的文字，则属于“匿名内联盒子”
  设定line-height时，行内框的高度不变，改变的是行距
• 行框盒子(line boxes) 每一行就是一个“行框盒子”，每个行框盒子“又是由一个个”内联盒子“组成
  行框高度等于本行内所有元素中行内框最大的值
  
  • 包含盒子(containing box)是包裹着上述三种box的box
    

参考资料

*CSS行高——line-height