css line-height & 图片底部间隙的处理

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

　　看大牛张鑫旭的视屏可能会理解的更深一些，点击这里 。

line-height 的学习

　　line-height，两行文字的基线之间的距离；

　　基线，英语练习本中就有，顶线，中线，基线，底线；

　　行内框盒子模型：

• 内容区域（content area），一个围绕文字的看不到的盒子，相当于鼠标选i中时的区域，只和 font-size、font-family 有关。
• 内联盒子（inline boxes），不会让内容成块显示，而是排成一行（inline），如果只是文字，就是匿名内联盒子，如 span。
• 行框盒子（line boxes），每一行都是一个行框盒子，由内联盒子组成，如果换行，那就是两个行框盒子。
• 包含盒子（containing box），由行框盒子组成，如 p。

　　内联元素的高度可以说是由行高决定的；

　　高度的表现不是行高，是内容区域和行间距， 行高(line-height) = 内容区域高度(content area) + 行间距(vertical spacing)：

• line-height:normal;（默认值，与 font-size 和 font-family 有关）
• line-height:number;（根据 font-size 大小计算，相乘的结果就是行高）
• line-height:length;（固定值，em、rem、px）
• line-height:percent;（根据 font-size 计算）
• line-height:inherit;（继承行高，input 默认的行高是 normal）

　　阅读类网站行高一般设置 1.5 就好了；网站开发匹配20px（20/font-size）;

　　body{font-size:14px; line-height:1.4286}

图片底部间隙

　　图文混排的情况下，inline 元素在默认情况下的 vertial-align 是 baseline（基线）对齐的。

　　这时，容器高度 = 文字行高 - 基线位置高度 + inline元素高度，所以图片下边会有一段间隙。

 

　　消除底部间隙的方法：

• 改变图片元素类型，vertical-align 只对 inline 和 inline-block 元素有效，图片设置 display:block 之后就不受影响了。
• 图片设置底线对齐，vertical-align:bottom 。
• 父容器行高足够小，基线上移，父容器设置 line-height:0 或者font-size:0 。

　　   

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      width: 300px;
      background: #0ff;
      margin: 100px;
      line-height: 0;
      /*font-size: 0;也可以哦，0*0=0 */
    }

    .wrapper img {
      width: 150px;
    }
  </style>
  <div class="wrapper">
    <img src="images/1.jpg" />
  </div>