Is line-height: 1.4 the same as line-height: 140%?

前端 未结 3 1940
萌比男神i
萌比男神i 2020-12-10 20:25

Is using a line-height value of 1.4 the same as using a line-height value of 140%? In other words, can we consider unitless value the same as perce

相关标签:
3条回答
  • 2020-12-10 21:15

    No.

    The unitless values are calculated based on the element's font-size:

    <number> (unitless) The used value is this unitless multiplied by the element's own font size. The computed value is the same as the specified . In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.

    Conversely, percentage-based values merely adjust the line-height based on the calculated line-height. Thus, if you have a calculated line-height of 10px, it will convert to 14px if you use line-height: 140%.

    0 讨论(0)
  • 2020-12-10 21:20

    There are not exactly1 the same because of inheritance, here is a trivial example.

    .box {
      display: inline-block;
      border: 1px solid green;
    }
    
    .box > span {
      font-size: 50px;
      border: 1px solid red;
    }
    
    .box > span > span{
      font-size: 50%;
      border: 1px solid red;
    }
    <div class="box">
      <span style="line-height:1.8;"><span>some text here</span></span>
    </div>
    
    <div class="box">
      <span style="line-height:180%;"><span>some text here</span></span>
    </div>

    In the first case, the last span will have a value of line-height equal to 45px which is 1.8 * (50% of 50px) where 1.8 is the inherited value of line-height from its parent. In the second case, the last span will have a value equal to 90px which is 180% of 50px where the whole value is inherited from its parent.

    In other words, the first span get the 1.8 then will consider its font-size while the second span will get the computed value from its parent and font-size will change nothing.

    <number>

    The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.

    <percentage>

    The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal. ref

    Note how in both cases, the computed value isn't the same which make the inheritance different in both cases.

    To better illustrate the percentage case:

    .box {
      display: inline-block;
      border: 1px solid green;
    }
    
    .box > span {
      font-size: 50px;
      border: 1px solid red;
      line-height: 180%;
    }
    
    .box > span > span {
      border: 1px solid red;
    }
    <div class="box">
      <span ><span style="font-size:50px;">some text </span></span>
    </div>
    
    <div class="box">
      <span ><span style="font-size:50%;">some text </span></span>
    </div>
    <div class="box">
      <span ><span style="font-size:20px;">some text </span></span>
    </div>
    
    <div class="box">
      <span ><span style="font-size:5px;">some text </span></span>
    </div>

    If you inspect the elements, you can clearly see how in all the cases the value of the line-height is equal to 90px

    Refer to this question to understand why the box height is getting bigger: Why would the height increase with a smaller font size?

    If we consider unitless value we will have a different result:

    .box {
      display: inline-block;
      border: 1px solid green;
    }
    
    .box > span {
      font-size: 50px;
      border: 1px solid red;
      line-height: 1.8;
    }
    
    .box > span > span {
      border: 1px solid red;
    }
    <div class="box">
      <span ><span style="font-size:50px;">some text </span></span>
    </div>
    
    <div class="box">
      <span ><span style="font-size:50%;">some text </span></span>
    </div>
    <div class="box">
      <span ><span style="font-size:20px;">some text </span></span>
    </div>
    
    <div class="box">
      <span ><span style="font-size:5px;">some text </span></span>
    </div>


    1If we omit the inheritance fact and we consider only the element where we explicitly set the line-height then we can say that both are the same since they will give the same result for the concerned element.

    0 讨论(0)
  • 2020-12-10 21:20

    See example..

    <div style="background:green;">
      <p style="line-height:1.4;">This is demo Text. <br>This is demo Text.</p>
    </div>
    <div  style="background:green;">
      <p style="line-height:140%;">This is demo Text. <br>This is demo Text.</p>
    </div>

    0 讨论(0)
提交回复
热议问题