line-height属性的细节

与大多数CSS属性不同，line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。

语法

line-height: normal | | |
normal 根据浏览器决定，一般为1.2。
number 仅指定数字时（无单位），实际行距为字号乘以该数字得出的结果。可以理解为一个系数，子元素仅继承该系数，子元素的真正行距是分别与自身元素字号相乘的计算结果。大多数情况下推荐使用，可以避免一些意外的继承问题。
length 具体的长度，如px/em等。
percentage 百分比，100%与1em相同。

有单位（包括百分比）与无单位之间的区别

有单位时，子元素继承了父元素计算得出的行距；无单位时继承了系数，子元素会分别计算各自行距（推荐使用）。

总结

当 父元素 的行高为 110% 或 1.1em 时,子元素内容行高为: 1.1 * [父元素文字大小值(font-size)];
当 父元素 的行高为 1.1 时,子元素内容行高为: 1.1 * [子元素文字大小值(font-size)]

demo:

  
  
    .green {
      line-height: 1.1;
      border: solid limegreen;
    }
    .red {
      line-height: 1.1em;
      border: solid red;
    }
    .yellow {
      line-height: 110%;
      border: solid yellow;
    }
    h1 {
      font-size: 30px;
    }
    .box {
      width: 18em;
      display: inline-block;
      vertical-align: top;
      font-size: 15px;
    }
  


  
Avoid unexpected results by using unitless line-height
    length and percentage line-heights have poor inheritance behavior ...
  
<div class="box red">
Avoid unexpected results by using unitless line-height
    length and percentage line-heights have poor inheritance behavior ...
  
<div class="box yellow">
Avoid unexpected results by using unitless line-height
    length and percentage line-heights have poor inheritance behavior ...
  

参考资料

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!